Progress Indicator With FileUpload control

Question

I have a web page which I want people to be able to upload content to. (There will only be a small number of people using it, as it is access restricted, so I'm not too worried about any DOS type attacks.)

I'm using a fileUpload control to do this:

protected void Button1_Click(object sender, EventArgs e)
    {
        if (fileUploader.HasFile)
        try {
          fileUploader.SaveAs(Server.MapPath("Uploads\\") + fileUploader.FileName);
          errorMessage.Text = "File name: " +
               fileUploader.PostedFile.FileName + "<br>" +
               fileUploader.PostedFile.ContentLength + " kb<br>";
        }
        catch (Exception ex) {
          errorMessage.Text = "ERROR: " + ex.Message.ToString();
        }
        else
        {
           errorMessage.Text = "You have not specified a file.";
        } 
    }

The files can be up to 50MB (I have changed the web.config to allow this). The problem I have is that with large files the user can't see the progress of the upload.

I want to know how I can display the progress on the page so the user can see something is happening. Not fussed about anything fancy - just something like:

bytes uploaded / total bytes

would be fine. I can get the total bytes using postedFile.ContentLength, but don't know how to get the bytes uploaded.

Also - am I able to refresh the screen as the upload is taking place?

Cheers,

Ben

Answer 1

I have used a couple of commercial components to do this:

Telerik and AjaxUPloader

Answer 2

Your implementation is a synchronous operation which does not 'feedback' to the user about the file upload progress.

There are quite a few alternatives and 3rd party components, you might want to google them.

Here's one to start with: ASP.NET File Upload with Real-Time Progress Bar

Answer 3

This answer is not specific to ASP...

A file upload is typically done by making an HTTP POST request with Content-type: multipart/form-data. This includes the file body in one of the parts of the request body.

So within a given browser tab, there can only be one page loading at a given time. The short answer is, unless you get really fancy with iframes (one for status, one for upload), you will not be able to show the status.

However, if you use Flash, you can. http://www.uploadify.com/ is a great little front-end plugin (for jQuery) which allows the user to select multiple files, and uploads them all, showing the status along the way. I just plugged it into a site that limits uploads to 64M. Works awesome.

Answer 4

You might also want to check out my open source NeatUpload component