HTTP File Upload Woes

I recently implemented support for email attachments in our sales prospecting application, Basho Open, and learned how painful file uploads on the Web can be. I've been on the server side since 2005, so this was my first step back into the HTML/CSS/Javascript waters in a long time.

Using only HTML and HTTP (i.e. no Flash), you're required to use a form and a file input element. This means native controls, styling nightmares, no progress reporting, and iframe hacks if you want to support uploads without page reloads. Since our user base supports Flash, I broadened my search for solutions. (For the gory details the client side issues of file uploads, see here).

We use jQuery, and a quick search for "jQuery file upload plugin" yielded Uploadify, which had a slick demo and seemed like it would meet my needs. Slightly annoying was the fact that Uploadify assumes you're using PHP on the server side, with the client-side JS code expecting certain responses that I had to reverse-engineer to make it work with Webmachine. No big deal, until I tested it on our staging cluster. Turns out Flash doesn't like wildcard SSL certs, which we use. Showstopper.

With about a day left to complete the feature, I went back to a pure-HTML+HTTP solution. I searched around a bit, and found a couple of valuable resources:

• Jack Born's Multiple File Upload Magic With Unobtrusive Javascript was very informative, but the solution he outlines requires a page reload to actually perform the upload, which due to the nature of our app wasn't acceptable.


• This page, which outlines the invisible-iframe technique I ultimately ended up adapting and using.
  

Even with the deadline looming, I managed to pull off HTML/HTTP-only solution and gussy it up enough to not be completely embarrassing. After some cleanup, I hope to release my final solution as a jQuery plugin. Some browser inconsistencies did pop up, namely:

• Firefox populates the value of the <input> element with the basename of the file, while IE provides the entire client-side path to the file, complicating display issues.


• Firefox also provides the size of the input file on the client side, allowing the developer to perform max-size checks on the client before a user tries to upload a larger-than-allowed file.

And that's just dealing with the client side. Next post: Easy (server-side) file upload processing with Webmachine.