How to do nice and simple file uploading in javascript?

Question

All I want is:

• select a file
• small progress bar (unless it is not simple)
• fail/success confirmation on client side
• trigger action on server side.
• all that without page reloading

Except that, the simpler the better.

Snippet would be most welcome.

Answer 1

There are plenty of scripts and tutorials around. Check for example http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

Answer 2

Apparently that's not as trivial as one might think, since you can't just take the body of a form, containing an <input type='file'/> tag, and submit that.

But you can submit the form with a target of another <iframe/> and then poll the server with a XMLHttpRequest object for status updates, that however, requires that your sever-side script, that handles the upload, does so in a asynchronous manner, otherwise you will only get a status update once the file has been fully uploaded, not the kind of progress status updates you want. I think this is a challenge for most web frameworks to date, but I have never actually had any reason to dig into it. Sounds fun though...

If you just want to submit the file, independently of the actual form, you'll do the same, but you don't have to worry about the progress status updates.

What you can do, is to replaces the <input type='file'/> once the upload completes, with a <input type='hidden'/> containing the server-side ID of the recently uploaded file. That way you'll know when the user hits save, what files you'll want to actually save.

That hidden thing can also be a checkbox, which would let you undo a file upload, by simply unchecking that checkbox before hitting save.

Answer 3

File uploads using the XMLHttpRequest object is not possible in all browsers (only Firefox and Safari/Chrome support it), so for a cross-browser implementation use the <iframe> trick.

If you want a real XHR file upload, I have written an extended article on how to do it in Firefox 3. It's so low level that you actually have to build the actual HTTP request from JavaScript strings.

Answer 4

Maybe GearsUploader will fit.