3

Background: (Read before you flame...)

I want a user to be able to SELECT a text file from an HTML "file input" (on their local device) and click an upload button. I do not want the file to upload directly, I want javascript to do some validation, formatting, and then display the formatted results to the user. Where the user has several options as to what they want to do depending on the results of the validation and formatting. (and yes it is validated on server side too.)

This is NOT an AJAX request, this is asking a user to select a file and then upload it, with javascript validating and formatting the file some along the way.

Question:

Is it possible to read a file (selected by the user for upload) into an HTML web page where it can be viewed by the user and parsed by Javascript or Jquery? If it is possible, how?

It must support the basic browsers Firefox, Opera, Safari, Chrome, and IE8+.

user1295718
  • 155
  • 1
  • 12
  • [HTML5 has some local file access powers](http://www.html5rocks.com/en/tutorials/file/dndfiles/), but don't count on it being widely available to users. IE8 is definitely off the table; if you want older browser support, you HAVE to upload the file to the server first. – Blazemonger Mar 27 '12 at 14:22
  • Why read the file using JavaScript? Can't you just take the uploaded file that is now server-side and include it in the page from the server? You could then use JavaScript to play with the file contents as they're in the DOM at that point. – kiswa Mar 27 '12 at 14:24
  • also look at the various options in this discussion: http://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript – robasta Mar 27 '12 at 14:24
  • @kiswa I can and I have been up until now. The server this is on is quite busy I was hoping to avoid the extra traffic until I knew that the information coming in was good or at least "supposed to be good" this particular request can fire off several hundred db requests. I wanted to kind of "pre-validate" and make sure the user could see what they were sending. – user1295718 Mar 27 '12 at 14:37

2 Answers2

5

The nearest thing you'll find is the FileReader API which is currently a draft with limited browser support.

You might have to look to using a signed Java applet to get wider support (but then you start depending on people having the Java plug-in installed).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks for the links (both very handy), and I'm a bit sad HTML5 is not better supported yet. It looks like I will be stuck with standard upload. Unfortunately for this particular case I cannot use plugins like Flash or Java. – user1295718 Mar 27 '12 at 14:45
  • FileReader is its own specification. It isn't part of HTML 5. – Quentin Mar 27 '12 at 14:49
0

I can only think of 2 ways besides unfinished and unsupported technology.

  1. Have a 2 step process where the user uploads it to the server and the server sends it back so you can do whatever validation, then when the validation is complete you send it back to the server (not as an upload, you already have the data).

  2. Flash has disk access, you could write a small Flash movie that accepts a file and then hands it to javascript but then you are depending on flash.

nathanjosiah
  • 4,441
  • 4
  • 35
  • 47