HTML5 File API + XmlHttpRequest = SWFUpload, now what?

So what should you do if you decided to ditch SWFUpload and embrace HTML5 solution for ajax file upload? In honor of the releases of Firefox 3.6 (with File API), I decided to just that in the GFX Firefox promotion site. (sounds perfectly reasonable to use Fx-only technology on such site, right?) Firefox now gives us the bricks (File API, binary XHR, and File drag-drop), but to build a house it still takes some work. The Mozilla Hacks demo works great but to work with the existing site I need:

  1. To create a SWFUpload-like button that opens file selection dialog instead of HTML form file input.
  2. To send the file as a ordinary file upload form – no need to change php backend to handle raw post
  3. Send the file by jQuery.ajax, firing global callbacks

I came up with these methods to solve them:

Continue reading