Best way to upload multiple files from a browser

Question

Hi all,

I'm working on web application. There is one place where the user can upload files with the HTTP protol. 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 of 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 : but 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

Well 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.

So here comes my question :
If you had the following requirement :

• 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 :

• I forgot : 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 such a pain to click n-times the "browse" button when you want to select multiple files in a folder.

Answer 1

There are HTTP/HTTPS upload controls that allow multi-file upload. Here is one from Telerik, which I have found to be solid and reliable. The latest version looks to have most if not all of your feature requirements.

Answer 2

There are a number of free flash components that exist with nice multiple file upload capability. They make use of ActionScripts FileReference class with a PHP (or whatever) receiver on the server side. Some have recently broken with the launch of FP10 but I know for certain that swfupload will work :)

Hope this helps!

Answer 3

You can upload multiple files with HTTP forms as well, as Dave already pointed out, but if you're set on using something beyond what HTTP and Javascript offers I would heavily consider Flash. There are even some pre-existing solutions for it such as MultiPowUpload and it offers many of the features you're looking for. It's also easier to obtain progress information using a Flash client than with AJAX calls from Javascript since you have a little more flexibility.

Answer 4

You may check the Apache Commons FileUpload package. It allows you to upload multiple files, monitor the progress of the upload, and more. You can find more information here:

http://commons.apache.org/fileupload/
http://commons.apache.org/fileupload/using.html

Good luck

Answer 5

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.

Answer 6

I've never used it with files of 2GB in size, but the YUI File Uploader worked pretty well on a previous project. You may also be interested in this jQuery Plugin.

That said, I still think the Java Applet is the way to go. I think you'll end up with less portability and UI issues than you expect and Drag/Drop works great. For the record, Box.net uses a Java Applet for their multi-file quick uploads.

Answer 7

OK this is my take on this

I did some testing with swfupload, and I have my previous experience with Java, and my conclusion is that whatever technology is used there is no perfect solution to do uploads on the browser : you'll always end up with bugs when uploading huge files, going through proxies, with ssl, etc...

BUT :

• a flash uploader (a la swfupload) is really lightweight, doesn't need authorization from the user and has a native interface which is REALLY cool, me thinks
• a java uploader needs authorization but you can do whatever you want with the files selected by the user (aka compression if needed), and drag and drop works well. Be prepared for some epic bugs debuggin' though.
• I didn't get a change to play with Silverlight as long as I'd like maybe that's the real answer, though the technology is still quite young so ... I'll edit this post if I get a chance to fiddle a bit with Silverlight

Thanks for all the answers !!

Answer 8

what about google gears ? (http://code.google.com/apis/gears/samples/hello%5Fworld%5Ffile%5Fsystem.html)