Javascript: cross-browser serverless file upload and download

Question

So I'm working on a web app where a user will need to:

• provide a file full of data to work on
• save their results to a file

All the manipulation is done in javascript, so I don't really have a need for server-side code yet (just static hosting), and I like it that way.

In Firefox, I can use their file manipulation api to allow a user to upload a file directly into the client-side code (using a standard <input type=file/>) and create an object URL out of a file so a user can save a file created by the client-side code.

<input type="file" id="input" onchange="handleFiles(this.files)">
<a download="doubled" id="ex">right-click and save as</a>
<script>
  function handleFiles(fileList){
    var builder = new MozBlobBuilder();
    var file = fileList[0];
    var text = file.getAsBinary();
    builder.append(text);
    builder.append(text);
    document.getElementById('ex').href = window.URL.createObjectURL( builder.getBlob() );
  }
</script>

So this is great. Now I want to do the same in other browsers - or, at least, modern versions of other browsers. Do similar APIs exist for Chrome and IE? If so, has anyone already built a cross-browser wrapper that I should be using?

Answer 1

It's mostly available on Firefox 3.6+, Chrome 10+, Opera 11.1+, and hopefully Safari 6 and IE 10.

See: http://caniuse.com/#search=FileReader.

Answer 2

Check out FileSaver.js and the a[download] attribute (supported in Chrome dev channel). Blob (object) URLs have somewhat limited support right now.