Reading and Creating Text Files Using jQuery and HTML5 File API

stacktips avtar

Written by:

Editorial,  5 min read,  updated on September 17, 2023

The following code snippet demonstrate how to read and create a text files using the jQuery and HTML5 file API. For the sake of simplicity, in this example I am using Bootstrap CSS framework for building the page.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="description" content="Your HTML, CSS, and JavaScript playground.">
    <title>HTML, CSS, JS Playground</title>
	<meta content="width=device-width, initialscale=1" name="viewport">	
	<link href="" rel="stylesheet">
	<link href="" rel="stylesheet">
	<script src="" type="text/javascript"></script>
	<script src="" type="text/javascript"></script>
	$(document ).ready(function() {
		//Put your java script here
	<div class="container">		
		<h1>Reading and Creating Text Files Using the HTML5 File API and jQuery</h1>
		<div class="form-group">			
			<button type="button" class="btn btn-default" id="btnOpen">Open...</button>
			<button type="button" class="btn btn-default" id="btnSave">Save</button>
		<input type="file" id="exampleInputFile" accept=".txt,.csv,.xml" class="hidden">
		<div class="form-group">
		  <textarea class="form-control" rows="15" id="exampleTextarea"></textarea>		  

Reading text file

$('#btnOpen').click(function() {
  if ('FileReader' in window) {
  } else {
    alert('Your browser does not support the HTML5 FileReader.');

$('#exampleInputFile').change(function(event) {
  var fileToLoad =[0];

  if (fileToLoad) {
    var reader = new FileReader();
    reader.onload = function(fileLoadedEvent) {
      var textFromFileLoaded =;
	  console.log("loaded " + textFromFileLoaded);
    reader.readAsText(fileToLoad, 'UTF-8');

Creating text file

$('#btnSave').click(function() {
  if ('Blob' in window) {
    var fileName = prompt('Please enter file name to save', 'Untitled.txt');
    if (fileName) {
      var textToWrite = $('#exampleTextarea').val().replace(/n/g, 'rn');
      var textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });

      if ('msSaveOrOpenBlob' in navigator) {
        navigator.msSaveOrOpenBlob(textFileAsBlob, fileName);
      } else {
        var downloadLink = document.createElement('a'); = fileName;
        downloadLink.innerHTML = 'Download File';
        if ('webkitURL' in window) {
          // Chrome allows the link to be clicked without actually adding it to the DOM.
          downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
          // Firefox requires the link to be added to the DOM before it can be clicked.
          downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
 = 'none';
  } else {
    alert('Your browser does not support the HTML5 Blob.');