Best way to upload multiple files from a browser

Sébastien Nussbaumer picture Sébastien Nussbaumer · Feb 24, 2009 · Viewed 29.9k times · Source

I'm working on a web application. There is one place where the user can upload files with the HTTP protocol. There is a choice between the classic HTML file upload control and a Java applet to upload the files.

The classic HTML file upload isn't great because you can only select one file at a time, and it's quite hard to get any progress indication during the actual upload (I finally got it using a timer refreshing a progress indicator with data fetched from the server via an AJAX call). The advantage: it's always working.

With the Java applet I can do more things: select multiple files at once (even a folder), compress the files, get a real progress bar, drag'n'drop files on the applet, etc...
BUT there are a few drawbacks:

  • it's a nightmare to get it to work properly on Mac Safari and Mac Firefox (Thanks Liveconnect)
  • the UI isn't exactly the native UI and some people notice that
  • the applet isn't as responsive as it should (could be my fault, but everything looks ok to me)
  • there are bugs in the Java UrlConnection class with HTTPS, so I use the Apache common HTTP client to do the actual HTTP upload. It's quite big a package and slows down the download of the .jar file
  • the Apache common HTTP client has sometimes trouble going through proxies
  • the Java runtime is quite big

I've been maintaining this Java applet for a while but now I'm fed up with all the drawbacks, and considering writing/buying a completely new component to upload theses files.

Question

If you had the following requirements:

  • upload multiple files easily from a browser, through HTTP or HTTPS
  • compress the files to reduce the upload time
  • upload should work on any platform, with native UI
  • must be able to upload huge files, up to 2gb at least
  • you have carte blanche on the technology

What technology/compontent would you use?


Edit :

  • Drag'n'Drop of files on the component would be a great plus.
  • It looks like there are a lot of issues related to bugs with the Flash Player (swfupload known issues). Proper Mac support and upload through proxies with authentication are options I can not do without. This would probably rule out all Flash-based options :-( .
  • I rule out all HTML/Javascript-only options because you can't select more than one file at a time with the classic HTML control. It's a pain to click n-times the "browse" button when you want to select multiple files in a folder.

Answer

Gautam picture Gautam · Feb 25, 2009

I implemented something very recently in Silverlight.

Basically uses HttpWebRequest to send a chunk of data to a GenericHandler.

On the first post, 4KB of data is sent. On the 2nd chunk, I send another 4K chunk.

When the 2nd chunk is received, I calculate the round trip it took between first and 2nd chunk and so now the 3rd chunk when sent will know to increase speed.

Using this method I can upload files of ANY size and I can resume.

Each post I send along this info:

[PARAMETERS] [FILEDATA]

Here, parameters contain the following: [Chunk #] [Filename] [Session ID]

After each chunk is received, I send a response back to my Silverlight saying how fast it took so that it can now send a larger chunk.

Hard to put my explaination without code but that's basically how I did it.

At some point I will put together a quick writeup on how I did this.