Best way to handle file uploads through HTTP

Question

File uploads through web pages using the standard HTML input always seems clunky to me. If the user tries to upload a large file, it can go on forever and they get no queue that the file is actually being uploaded.

I have tried to do things like provide a gif graphic that is an animated graphic bar, but it doesn't give the user any indication of how much is uploaded. I have even tried to do a progress bar with AJAX, but those were always ugly and never seemed to work right.

This has been an issue with many of my clients, and often I'm asked if there is a better way. Sometimes I'll just provide them an FTP site so they can upload it there, but that's not a practical solution either.

What do you think the best way to handle HTTP file uploads from HTML is? What are some good ideas / examples you have seen around the internet?

Answer 1

There are a number of client side controls that one can use.

You can

• Build your own ActiveX control. Windows/IE only
• Use Flash to queue up files and upload them one at a time to the server using the stanard file upload protocol.
• Use a signed java applet to upload.
• Write a browser plugin.

Some random links from google:

http://www.element-it.com/MultiPowUpload.aspx

http://www.codeproject.com/KB/aspnet/FlashUpload.aspx

http://www.dmxzone.com/forum/go/?36564

Answer 2

There are several techniques for asynchronous file transfer with a progress bar over HTTP, most of which involve either Flash or XMLHttpRequest.

Answer 3

I'll add swfupload to this. It's an open source flash uploader that can degrade gracefully if the user doesn't have flash.

Answer 4

The documentation of Apache Commons FileUpload states that one can achieve this using a Progress Listener although I haven't tried this approach any time. The Telio blog has an example, that might interest you.

Answer 5

There's really only the one mechanism for uploading via a browser. You can, however, dress it up and make it more user friendly by providing a progress bar to show that the upload is progressing and at what speed.

This is typically done by targeting the upload form at a hidden iframe and using AJAX calls to find out how much of the file has reached the server.

Here's one example of this:

Megaupload

Answer 6

If you running a mod_perl2 apache there is the Apache2::UploadProgress module. This adds an id to the http upload request, you then query the server for the progress of that upload. Has built in support for creating an AJAX progress bar in a popup window or within the page doing the upload. If you want to build your own progress display you can get the info back as XML or JSON data.

Answer 7

The YUI Uploader utility uses a Flash-based uploader, is well documented, and has several examples for you to try. I've used it on several projects, and would recommend it.

Answer 8

I use this one for a fairly simple and complete tool. The base sourcecode is good and you can easily customize it if necessary. AJAX File Upload