HTML5 File Upload Progress - Client Side Only

Question

I have noticed that the new XMLHttpRequest object supports an 'onprogress' event in firefox. Is it possible to utilize part of the new HTML5 File api's to get an upload progress bar without any server-side modifications required?

Answer 1

I believe in principle yes, though I haven't tried it out yet.

What's going to be a problem is that XMLHttpRequest#send() takes a Unicode string and encodes it as UTF-8. It doesn't give you the ability to send pure binary, and most binary files like images are not going to happen to be valid UTF-8 sequences.

So probably you'd be using what the FileAPI spec calls a “binary string” (bytes treated as ISO-8859-1, so each charCodeAt corresponds to a byte), recoded to UTF-8. This would end up around 50% bigger than a plain file upload. Is it worth the slower upload to get the progress report?

(God, if only browsers had a better UI to show how the upload was going, none of the endless scripting/Flash/Java/ActiveX nonsense would ever have been necessary. Come on, browser vendors, is a nice big info popup with a progress bar really too much to ask for?)

Answer 2

Yes, in theory, although I would have to question the accuracy since Internet speed generally fluctuates (more-so if you aren't wired). It would probably jump around alot.

Then again, what is an accurate progress bar? I'd like to see one in Windows before I see one online!