How to display a progress bar while uploading files on server?

Question

I am working on a video upload module, which ultimately stores all the user uploaded video's on the youtube (using youtube api's).

I want to display a progress bar as soon as user click's on upload button and continue showing until the video is uploaded.

I know generally this is achieved using ajax toolkit in .net but since I am using File Upload control, its not compatible with the ajax toolkit.

Kindly suggest me how I achieve this.

The file upload control does a postback so unless it's in an update panel or some such where would you expect to display the progress bar as the page is being posted to the server. If you want a progress bar you pretty much need to use ajax in some way even if it is not the ajax control tool kit. — Ben Robinson, Sep 03 '12 at 16:38
@BenRobinson : I have seen in some website it show's progress bar, while Page loads, I have used a standard File Upload hence its doesn't fire's post back, it happens when user click's the submit button, I was looking at some way of grabbing the browser's progress and displaying progress using JS or jquery. — foo-baar, Sep 03 '12 at 16:41
When the user clicks the submit button it posts the page to the server. If you want a progress bar you will have to do the upload using ajax. Every site where you have seen a progress bar is uploading using ajax. — Ben Robinson, Sep 03 '12 at 16:58

Magnus · Accepted Answer · 2012-09-03T17:36:34.243

3

You can not show the actual progress of the file upload. But you can show a hidden animated "loading" image with javascript. It will show while the form is submitted (with the file) to the server.

Html:

<img id="loading_img" style="Display: None" src="loading.gif" />

Javascript:

$('#Form1').submit(function() {
    $('#loading_img').show(); // Show image
    return true; // Proceed with postback
});

edited Sep 03 '12 at 17:36

answered Sep 03 '12 at 17:25

Magnus

45,362
8
80
118

I was doubtful about this, but worked like Charm :) Thanks @Magnus – foo-baar Sep 05 '12 at 12:10

score 1 · Answer 2 · edited May 23 '17 at 11:53

A while ago I needed exaclty that, I first did search for a javascript solution but ended up with a Flash uploader. Some browsers (Chrome, Firefox) report uploading status if you're uploading through the XMLHttpRequest API in Javascript, so it definitely can be done, but this method is (or was at the time I checked it out) not cross-browser. You can check this example and also this Q & A.

If that doesn't work cross-browser, you can use an existing Flash file uploader or create one your own using Flash or Silverlight. This, of course, makes your site Flash or Silverlight dependent. This, for example, is a project that uses Flash.

score 0 · Answer 3 · answered Sep 03 '12 at 17:49

0

Fastest way to do that is to buy 3rd party control, for example Telerik Upload control can do that (no flash)

http://demos.telerik.com/aspnet-ajax/upload/examples/customizingraduploadui/defaultcs.aspx

answered Sep 03 '12 at 17:49

Antonio Bakula

20,445
6
75
102

How to display a progress bar while uploading files on server?

3 Answers3