Ajax - Show Loading Image While Uploading Files in Asp.Net using C#.Net, VB.Net

In this article i will explain how to show loading Image while uploading files/images using ajax updatepanel control in Asp.Net using C#.Net, Vb.Net. and also explain how to solve the problem of “updateprogress not working with postbacktrigger in asp.net.

In previous articles I explained How to Upload Files in Asp.net without Postback using Ajax File Upload Control or How to Call Code Behind or Server Side Function from JavaScript in Asp.Net or How to Call Asp.Net Page Method using jQuery AJAX With Example or Send and Receive JSON Objects from Web Services using jQuery and Ajax in Asp.Net. Now I will explain how to Show Loading Image While Uploading Files in Asp.Net using C#.Net, VB.Net.

Generally, in ajax updatepanel updateprogress will work for asynchronous postback requests but to make it work with ajax postbacktrigger we need to write JavaScript function.

<script type="text/javascript">
    function showProgress() {
        var updateProgress = $get("<%= UpdateProgress.ClientID %>");
        updateProgress.style.display = "block";
    }
</script>

To show updateprogress with postbacktrigger we need to write JavaScript function and need to call that function in button OnClientClick that would be like as shown as below :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Loading Image while uploading images using updatepanel</title>
  <style type="text/css">
 
.overlay
{
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: white;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}
</style>
<script type="text/javascript">
    function showProgress() {
        var updateProgress = $get("<%= UpdateProgress.ClientID %>");
        updateProgress.style.display = "block";
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
   <ContentTemplate>
   <div style="align:center; margin-left:350px; margin-top:200px">
     <asp:FileUpload ID="uploadfiles1" Height="30px" runat="server" />
    <asp:Button ID="btnUpload" Text="Upload" runat="server" 
        onclick="btnUpload_Click" 
        BorderStyle="None" 
        BackColor="Blue" 
        ForeColor="White"
        OnClientClick="showProgress()" Height="30px"/><br />
       <br />
     <asp:Label ID="lblMsg" runat="server"/>
   </div>
   </ContentTemplate>
    <Triggers>
    <asp:PostBackTrigger ControlID="btnUpload" />
     </Triggers>
    </asp:UpdatePanel>
   <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
<ProgressTemplate>
<div class="overlay">
        <div style=" z-index: 1000; margin-left: 350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
            <img alt="Loading" src="load.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
    </form>
</body>
</html>

After completion of aspx page create new folder with name Files into your root directory of your web application to upload files.

C# Code:

protected void btnUpload_Click(object sender, EventArgs e)
   {
       string fileName = Path.GetFileName(uploadfiles1.FileName);
       uploadfiles1.SaveAs(Server.MapPath("~/Files/") + fileName);
       lblMsg.Text = "File Uploaded Successfully";
       System.Threading.Thread.Sleep(2000);
   }

VB.Net Code:

Protected Sub btnUpload_Click(sender As Object, e As EventArgs)
       Dim fileName As String = Path.GetFileName(uploadfiles1.FileName)
       uploadfiles1.SaveAs(Server.MapPath("~/Files/") & fileName)
       lblMsg.Text = "File Uploaded Successfully"
       System.Threading.Thread.Sleep(2000)
   End Sub

Demo:

Sample Code:

About Nikunj Satasiya

I am a passionate programmer and a Software Engineer who love developing applications in Microsoft Technologies, blogging and other related technologies like Asp.Net, VB.Net, SEO, Sql Server,My SQL,Asp.Net-MVC, LINQ, C#.Net, Stored Procedures, Ajax, JavaScript, JQuery, xml etc.

Project Plazza

Ajax - Show Loading Image While Uploading Files in Asp.Net using C#.Net, VB.Net

About Nikunj Satasiya

Related Post