How to create a File Upload with progress data?

Question

I'm developing a web (using asp.net and c#) which has a FileUpload control from asp.net. The upload thing works perfect and as far as I know I can't show progress data (%, bytes transfered, upload speed, time elapsed, time left, progress bar) using the FileUpload control from asp.net because its not asyncrhonous.

I've searched a lot (really) on the internet and I didn't find what i'm looking for and too much info has become a big confusion since I'm not sure about what I have to use.

On my web page I have a file named "UploadFile.aspx" which has a FileUpload control and a button that handles the uploading. On code-behind (UploadFile.aspx.cs) I have all the server-side logic (Upload the file into specific folder, store info about that file into a database, etc. etc) and I don't want to change this.

What I need to know is how to show the progress data to the user while is uploading the file? I can't use 3rd party applications because this is for an important commercial site. It's not a problem for me if I have to learn javascript / jQuery / Whatever but really i'm a bit lost and I don't know how to start.

Thanks for your time and your help guys.

Answer 1

If you don't want to use any 3rd party that relies on Flash / Html 5, please take a look at this article:

http://vanacosmin.ro/Articles/Read/AjaxFileUpload

This is possible (and if you're using .NET 4.5 GetBufferedInputStream will make your life easier), but it is not very easy, as you'll see.

Basically, if you want a file upload with progress bar that is fully compatible with every browser, you need to handle this server side and give an url where the client (the browser) can check periodically for the progress with ajax.

Answer 2

There are lots of lots of demo code are available on the net to show the progress bar with file upload control in c#, most of them work fine on Local system but never work on the live server, Because You CAN'T USE A FileUpload control for what you want to do. When a user POSTs a file, you have to think of it like a querystring parameter. It goes as one Http Request. If you want to do a progress bar you'll want to look into something that can interact with the server asynchronously.

Answer 3

There's some pretty cool solutions out there. Granted, you can code your own, but I'd suggest using a jQuery plugin like Plupload. If you need help setting it up, you can read their documentation.