In this article I will explain how to show (display) loading Progress Bar when uploading files using AJAX UpdatePanel and UpdateProgress in ASP.Net in C# and VB.Net.
ASP.Net FileUpload control requires PostBackTrigger while ASP.Net AJAX UpdateProgress works with AsyncPostBackTrigger of AJAX UpdatePanel.
This article explains how to use ASP.Net AJAX UpdateProgress with PostBackTrigger so that when file is uploading a loading Progress Bar can be shown.
 
 
HTML Markup
The following HTML markup consists of an ASP.Net AJAX UpdatePanel containing a FileUpload control, a RequiredFieldValidator and a Button.
The ASP.Net AJAX UpdatePanel has an associated ASP.Net AJAX UpdateProgress control.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="loader.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <div style="margin: 20px">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:RequiredFieldValidator ErrorMessage="Required" ControlToValidate="FileUpload1"
            runat="server" ForeColor="Red"></asp:RequiredFieldValidator>
        <br />
        <br />
        <asp:Button ID="btnUpload" Text="Submit" runat="server" OnClick="Upload" />
    </div>
</ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
 
 
Uploading Files to Server
When the Upload Button is clicked, the uploaded file is saved to a folder.
C#
protected void Upload(object sender, EventArgs e)
{
    string fileName = System.IO.Path.GetFileName(FileUpload1.FileName);
    FileUpload1.SaveAs(Server.MapPath("~/Uploads/") + fileName);
}
 
VB.Net
Protected Sub Upload(sender As Object, e As EventArgs)
    Dim fileName As String = System.IO.Path.GetFileName(FileUpload1.FileName)
    FileUpload1.SaveAs(Server.MapPath("~/Uploads/") & fileName)
End Sub
 
 
Making AJAX UpdateProgress work with UpdatePanel PostBackTrigger
In the following Script, a window.onsubmit event handler has been defined, which will be triggered when any Button does a PostBack.
Inside the window.onsubmit event handler, first the ASP.Net Validators on the page are validated and if the validation is successful then the ASP.Net AJAX UpdateProgress is shown using its set_visible JavaScript function.
<script type="text/javascript">
window.onsubmit = function () {
    if (Page_IsValid) {
        var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
        window.setTimeout(function () {
            updateProgress.set_visible(true);
        }, 100);
    }
}
</script>
 
 
AJAX UpdateProgress design
In order to display ASP.Net AJAX UpdateProgress in full screen, please refer my article Display ASP.Net AJAX UpdateProgress in center of page with background covering whole screen.
 
 
Screenshot
Show Progress Bar when uploading files using AJAX UpdateProgress in ASP.Net
 
 
Downloads
Download Code