22

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.

8 Answers 8

13
+100

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

5
  • 2
    I haven't seen that one, thanks. Although it doesn't seem to provide any progress polling.
    – UpTheCreek
    Nov 3, 2009 at 12:44
  • That doesn't have a progress bar, which is one of the requirements.
    – Zarel
    Nov 12, 2009 at 3:40
  • you can hook a progress bar into ajax uploader, it just doesn't seem to have any good documentation.
    – pilavdzice
    Jul 23, 2012 at 17:25
  • Looks like this is now called Fine Uploader? And it costs money..
    – Yarin
    Jul 11, 2013 at 21:04
  • 1
    It only costs money if you pay for the commercial license, it's still available under GPLv3. Jul 12, 2013 at 14:25
5

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.

4
  • Yes, of course I realise that there will need to be server side integration. I'm interested in finding pre-created client side stuff - the script doesn't care what generated a JSON response.
    – UpTheCreek
    Nov 3, 2009 at 12:23
  • Then start from finding an appropriate progress bar plugin. You would need less than 10 lines of jQuery code to make it update from a JSON response. Even if you do find a ready made plug-in, the configuration code needed to make it suit your needs would be as much as big. Nov 3, 2009 at 12:43
  • Well yes I know I could do it all myself, but I wanted to see if there was anything ready made. Hence this question.
    – UpTheCreek
    Nov 3, 2009 at 12:55
  • Everything ready-made comes with server-side integration. As kgiannakakis mentions, integrating something ready-made with your server will take longer than simply writing it yourself, and it'll look better if you write it yourself, too.
    – Zarel
    Nov 12, 2009 at 3:44
5

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.

1
  • Thanks for sharing your experiences.
    – UpTheCreek
    Nov 12, 2009 at 19:32
1

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.

4
  • 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.
    – UpTheCreek
    Nov 3, 2009 at 12:52
  • We too use swfupload. I haven't seen a means of doign progress-bars without Flash / Java, but I'll be happy to learn otheriwse :) ; I'm sceptical that the server actually gets to react until the whole file is POST'd, hence can't report back %age received during the upload - whereas I believe Flash does the progress-bar client side based on the %age SENT rather than RECEIVED). The server-side bit of deconstructing the multi=part mime is quite a pain too IME (mucking about with Byte/Unicode conversion)
    – Kristen
    Nov 10, 2009 at 16:11
  • a basic summary of how to do this without flash requires a little more communication from the client during the upload. The server processes the upload data in chunks as it streams, after each chunk it writes all it knows about the uploaded data into a file specified by the clients query string. In turn while the client is sending the posted file to the server it can repeatedly poll the information file until it indicates that the server has received everything. Using the stream length and processed length we can work out a percentage for a CSS or JavaScript progress bar.
    – Matt Smith
    Nov 10, 2009 at 22:09
  • Interesting, I'll look into this - thianks.
    – UpTheCreek
    Nov 13, 2009 at 6:38
1

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.

0

Try AsyncFileUpload for asp.net web applications.

1
  • I haven't used the ASP.NET Ajax library before. Unfortunenately the demo on the site doesn't seem to be working. Looking at the summary though, it doesn't look like it supports polling.
    – UpTheCreek
    Nov 13, 2009 at 6:36
0

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

0

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.

1
  • There are server side components available, which the op recognizes will be required. You are correct that there is no other clientside option available besides flash, silverlight, or similar browser plugin.
    – Kevin Peno
    Nov 12, 2009 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.