Read and save files

The FileReader object allows to asynchronously read the contents of files using File or Blob objects.

The File interface doesn't define any methods, but inherits methods from the Blob interface. You can use File anywhere you can use Blob.

read file

The <input> element with type="file" allows the user to choose one or more files from their device storage. Read more details about file chooser.

Choose .txt file.<br>
<input type="file" id="userFile" 
    accept=".txt">
<br>
<textarea id="txtContent" rows="10">
</textarea>

<script>
function onFileSelect(e){
  var file = e.target.files[0];
  var fr = new FileReader();   
  
    fr.onload = function (frEvent){
     document.getElementById("txtContent")
     .value = frEvent.target.result; 
  }    
    
  fr.readAsText(file);  
}   
    
document.getElementById("userFile")
    .onchange=onFileSelect;
</script>

save file

function download(file, filename) {
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { 
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

download(new Blob([ "Hello world!"], {
    type: 'text/plain'
}), "hello.txt");

There is FileSaver.js that resolves saving files on the client-side. It is perfect for web apps that generates files on the client.

FileReader