Show Progress Bar when uploading files

The example explains how to Show Progress Bar when uploading files using AJAX Update Panel and Update Progress in ASP.Net. FileUpload control in asp.net requires PostBackTrigger while ASP.Net AJAX UpdateProgress works with AsyncPostBackTrigger of AJAX UpdatePanel.

Add below code in aspx page of empty web services.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.

<body>
    <form id="form1" runat="server">
        <div>
            <h2>Show Progress Bar when uploading files</h2>
            <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="Images/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 ID="RequiredFieldValidator1" 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>
        </div>
    </form>
</body>

Add below code in the button click event.

protected void Upload(object sender, EventArgs e)
       {
           string fileName = System.IO.Path.GetFileName(FileUpload1.FileName);
           FileUpload1.SaveAs(Server.MapPath("~/Uploads/") + fileName);
       }

Script

Add below script in the head section.

<script type="text/javascript">
window.onsubmit = function () {
    if (Page_IsValid) {
        var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
        window.setTimeout(function () {
            updateProgress.set_visible(true);
        }, 100);
    }
}
</script>

 Output

Demo Code

Download Demo