Best non-flash upload component for web applications?

Question

Hi,

I would like recommendations for upload scripts/components. My criteria:

• No flash
• Plain Javascript ok, jquery ok
• Must provide progress bar (updated from for instance ajax call).

Probably isn't relevant, but I use ASP.NET MVC on server side.

Thanks

UPDATE Yes, I know there will need to be a server side component to this, but I can provide that. I'm more interested in the client side scripts. (Perhaps some solutions will be tied to their server side implimentations though - I don't know)

Just to clarify - it doesn't have to be .net specific. I'm happy to use a component that only comes with (for instance) PHP server side scripts, and roll my own for .net.

---

Thanks for all the answers - some very useful info there. In the end I accepted the 'AJAX uploader' - It didn't meet the progress bar requirement, but it seems that nothing might (at least without flash). I think I will also look into the possibililty of creating my own, based on some of the info here - will post back if I have any luck.

Answer 1

The server-side technology is very relevant for what you are trying to do. Server interaction is necessary for such kind of things.

I don't know of any ready made component, but this article could be helpful.

Based on your update it seems that you are looking for a client component bound to a specific server technology and feel confident that you can easily convert this to .NET. In my opinion this won't be easy. To implement the progress bar thing you need a file upload listener. In Java, I had luck doing something similar using Apache Commons FileUpload and by implementing the ProgressListener interface. Basically I have followed the instructions on this article. Besides the progress listener, I needed to implement a servlet that returned the current percentage of the upload and at the client side use a progress bar jQuery plug-in, which I regularly updated by Ajax calling the percentage servlet. These are the easy bits. As I've commented, you can easily implement them yourself in no time.

The hard part is the progress listening and this is very much different, depending on the server technology. So I recommend that you start from there. Find out how you can listen to the progress of a file uploaded using ASP.Net MVC. The article linked above is a good starting point.

Answer 2

Ajax Uploader We use this and it's pretty good, worth a try anyway.

Edit: For some reason I thought we used Uploadify, turns out it was this.

Answer 3

The flash upload components in most JavaScript implementations are there because they provide a greater amount of information about the file and it's upload. which allows you to continually provide and event framework for progress bars. the most popular is of course http://swfupload.org/

Flash has access to the file information before the upload actually begins. using a pure JavaScript solution you only have access to the length of the file stream on the server until the whole file has been received in full and saved to the server hard drive.

The following very old classic ASP script provides a file that your javascript could poll which would siply contain the percentage of the completed upload received on the server so far.

http://www.freeaspupload.net/

it's not classy it just does a good job of what it does. I haven't seen a more modern .net version yet.

Answer 4

Try AsyncFileUpload for asp.net web applications.

Answer 5

You didn't mention a price requirement at all, so I'll throw the Telerik control out there. I've used it and it was pretty easy to implement. They have a server-side and client-side API, progress bars, client-side validation, and is Ajax enabled.

Demo site: http://demos.telerik.com/aspnet-ajax/upload/examples/overview/defaultcs.aspx

Answer 6

We've played around with this some for an internal project, and I don't think your criteria of a non-Flash progress display can be met. The reason Flash-based uploaders are so popular is that JavaScript is incredibly restricted on client-side web browsers: for security reasons, JavaScript can't access any files on the client's hard drive (so no checking file length before uploading and no reading chunks of the file itself to upload), it's very restricted in how much it can manipulate <input type='file'> controls (since otherwise it could select and upload files itself without the user's knowledge), and it can only upload the file as an all-or-nothing POST'ed form submission (so no progress reports).

Even if you could work out these client-side problems, as far as I know, any generic web server is going to wait until it's received the entire POST'ed file upload before passing it on to the server-side web app, so there's no opportunity for a server-side component to update status as it receives each chunk.

It looks like something like AJAX Upload is the best you can do.

Answer 7

I don't think that there is a component that matches your requirements, because as far as I know, every solution that provides a progress bar is flash based. ;)

But, like TWith2Sugars I've used AjaxUpload, and it works beatifully, but no progress bar.

Answer 8

Use PHP's APC module to be able to get progress for the upload. Here's a decent article on how to set this up.

http://www.haughin.com/2007/10/23/php-upload-progress-with-php-52-apc/

Obviously this requires PHP, but if that is possible for you, then you are all set.