Click here to Skip to main content
Click here to Skip to main content
Go to top

Progress bar for a long running upload/task

, 4 Sep 2007
Rate this:
Please Sign up or sign in to vote.
An article on a simple animated progress bar for uploads/long running tasks.

Introduction

In most projects, we would either allow the user to upload files or long running tasks to be performed. It would be great if we could communicate to the user that there is some process happening in the background, with a progress bar.

Background

I searched the web to get some kind of help, and at last found this useful link which shows an easy-to-implement, cross-browser technique for displaying an animated progress GIF while a long running method is going on in your ASP.NET page. This code would help to implement a cross-browser technique for displaying an animated progress GIF while a long running method is going in your ASP.NET page, which actually satisfied my requirement. But there was a small issue: this animated GIF was shown even when ASP.ENT validations failed on the page. The requirement was to show this animated GIF only when the validations succeeded. The next section explains how this problem was addressed.

Using the code

The code below contains the .aspx controls used in the page. The span element is hidden. The span element contains the animated GIF, the TextBox, and the RequiredFieldValidator to test validation. The button for upload calls the JavaScript function showDiv() on client click.

<table>
<tr>
    <td align="left" colspan="2">
        <span runat="server" id='myHiddenDiv' style='display:none'> 
            <img runat="server" src="images/progress-wheel.gif" 
               id='myAnimatedImage'/>
            <b class="upload" style="color:#8CC63E;font-size:x-large;"> 
            Uploading....
            </b>
        </span> 
    </td>
</tr>
<tr>
    <td>
        Title:
    </td>
    <td>
        <asp:TextBox ID="TitleTextBox" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
        ControlToValidate="TitleTextBox" ErrorMessage="Please enter title" 
        runat="server"></asp:RequiredFieldValidator>
    </td>
</tr>
<tr>
    <td>
        Select File
    </td>
    <td>
        <asp:FileUpload ID="FileUpload1" runat="server" />
    </td>
</tr>
<tr>
    <td colspan="2">
        <asp:Button ID="Button1" runat="server" Text="Button" 
        onclick="Button1_Click" OnClientClick="return showDiv();" />
    </td>
</tr>
</table>

The code snippet below contains the JavaScript code to enable the progress bar GIF when the upload is taking place. When the user clicks the upload button, the showDiv() JavaScript method gets executed. The WebForm_DoPostBackWithOptions function is the ASP.NET 2.0 system that internally calls Page_ClientValidate. The parameters for the object WebForm_PostBackOptions() are:

function WebForm_PostBackOptions(eventTarget, eventArgument, 
         validation, validationGroup, actionUrl, trackFocus, clientSubmit)

In our case, we have set eventTarget to uploadButton, client side validation to true, and there is no actionUrl, so this will be a postback in the current page.

new WebForm_PostBackOptions(uploadButtonId, "", true, "", "", false, false)

Once the above code gets executed, we can find out whether the client-side validation was a success or failure, by calling var validated = ValidatorOnSubmit();. In case all client-side validations are true, then we can use the setTimeout method to make the DOM reset the src property of the image after 200ms. So when you click the upload button or long running methods, the image will be shown until the postback returns and the page is reloaded. Once the page is reloaded, the animated progress bar will disappear.

<script language="javascript">
function showDiv() 
{
    var uploadButtonId = ''
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(
       uploadButtonId, "", true, "", "", false, false));

    var validated = ValidatorOnSubmit();

    if(validated == true)
    {
        document.getElementById('').style.display ="";
        setTimeout('document.images["myAnimatedImage"].src = 
                           "images/progress-wheel.gif"', 200); 
    }     
} 
</script>

References

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Manjunath Shrikantiah
Architect
India India
9+ plus years of experience in IT industry. This includes experience in architecting, designing and developing solutions on Web and desktop application platforms

Comments and Discussions

 
GeneralTNX PinmemberITMaiO8-May-08 0:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 5 Sep 2007
Article Copyright 2007 by Manjunath Shrikantiah
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid