Building an HTML5 Drag & Drop File Uploader Using Sinatra and jQuery: Part 1 | Hacker News Reader

Building an HTML5 Drag & Drop File Uploader Using Sinatra and jQuery: Part 1

onehub.com

77 pointstexel6 comments

I'm not sure why he dismisses the FileAPI right away... one of the goals of the Reader according to http://www.w3.org/TR/FileAPI/ is:

User agents should provide a streamlined programmatic ability to send data from a file to a remote server that works more efficiently than form-based uploads today

Example: A Video/Photo Upload App. User is able to select large files for upload, which can then be "chunk-transfered" to the server.

This means that although this XMLHttpRequest2 method is nice, in practice it will still suffer from all the issues that http uploads suffer from at the moment. Chunked uploading, which the W3C spec explicitly supports, would be a much better solution for large files, no?

The FileReader API allows you to do some cool things, but I wanted to avoid chunked uploading for a few reasons. First, it's way more complex to handle given the way our app currently deals with files, and second, there isn't nearly as much existing browser support for both the Blob interface and FileReader in general. This post deals a bit with the current state of things:

http://www.filosophy.org/2010/06/a-state-of-limbo-the-html5-...

The FileAPI has even less support than XMLHttpRequest 2. Specifically, you are linking to a spec that was updated on tuesday of this week: "W3C Working Draft 26 October 2010". It will be excellent once we can do chunked uploads but this is still a vastly better experience then <file> fields!

Note the suspicious lack of commentary on which version of IE supports XMLHttpRequest level 2. Is it supported? And is there an elegant way to fallback to the old iframe approach? Conditionally including Javascript files seems to be a poor choice, I'm not sure if I'd rather just stick with the old way, even if it's awkward.

--------

An aside: I found the "XMLHttpRequest Level 2" name to be pretty funny. I'm not sure why it tickled my funny bone in such a way.

    A wild XMLHttpRequest (lvl 1) appears!
    Engineer uses SendFile... it doesn't seem to be working.
    Engineer is defeated!

    A wild XMLHttpRequest (lvl 2) appears.
    Engineer uses SendFile... it's super effective!

To my knowledge, XMLHttpRequest Level 2 isn't supported in any shipping version of IE. I haven't tried IE9 yet, so it might be available there. When building the actual production uploader for onehub.com, I drew a line in the sand and decided not to support any fallback scenarios, at least for the first iteration. If you'd like, fork the uploader on github and hack away :)

Thanks. I just might, next time I need to do file uploads... I've been really enamored with Sinatra as of late, and it seems like every side project I do needs file uploading...

Reply on news.ycombinator.com