In-browser file edit and save

by Joshua Koudys

HTML

<h1>File Upload + Download</h1>

<label>Choose file to edit
    <input type="file" id="localFile" />
</label>
<p id="output"></p>

JavaScript

document.getElementById('localFile').addEventListener('change', function () {
    var readerLoad = new FileReader();
    var readerSave = new FileReader();
    var file = this.files[0];

    if (file) {
        readerLoad.readAsBinaryString(file);
    }

    readerLoad.onloadend = function () {
        var p = document.createElement('p');
        var binaryContents = this.result;
        var blob = new Blob([binaryContents]);
        p.appendChild(document.createTextNode(binaryContents));
        document.getElementById('output').appendChild(p);
        
        // Let's save the new blob right here
        readerSave.readAsDataURL(blob);
    };
    
    readerSave.onloadend = function () {
        var a = document.createElement('a');
        a.appendChild(document.createTextNode('Download this file'));
        a.href = this.result;
        document.getElementById('output').appendChild(a);
    };
});