Question

(Am new to web programming, so apologies for any lack of rudimentary knowledge.)

My page allows a user to select a file that is then read clientside & displayed in a textbox on the page. The easiest way I found to do this was to use a FileReader object, which works fine in Firefox and Chrome.

This doesn’t work in Safari (yet), so what should I do instead?

//When the eventlistener detects a change in the input file...
var file = evt.target.files[0]
var reader = new FileReader();
reader.onload = function (e){document.getElementById('data').value = e.target.result};
reader.readAsText(file);

Relevant Notes:

• I’m working with Safari for windows
• Right now the page is local as is the file to read. Chrome had issues with this until I used the flag –allow-file-access-from-files

Answer 1

Sadly, the only answer I can come up with will hog some extra bandwidth.

Firstly, use something like if (typeof FileReader !== "undefined" or Modernizr to follow your normal flow for the browsers that DO support FileReader. Otherwise, POST the file via AJAX to some server-side script that echoes back the contents.

So for compliant browsers, you get to save yourself some bandwidth and for non-compliant browsers you have to take one for the team.