Show Progress Bar while Uploading Files using AJAX UpdateProgress in ASP.Net

By: Suresh Dasari Jun 15, 2015

Introduction:

Here I will explain how to show or display loading / progress bar while uploading files using ajax updatepanel updateprogress in asp.net using c#, vb.net with example. By using ajax postbacktrigger and updateprogress properties in ajax updatepanel in asp.net we can show loading image while upload files using c#, vb.net.

Description:

In previous articles I explained show progressbar during postbacks using updatepanel, ajax updatepanel with triggers example in asp.net, asp.net confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to show progress bar while uploading files using ajax updatepanel updateprogess in asp.net using c#, vb.net.

Now open your aspx page and write the code like as shown below

<title>Show Loading Image while uploading images using updatepanel</title>

.overlay

{

position: fixed;

z-index: 999;

height: 100%;

width: 100%;

top: 0;

background-color: Black;

filter: alpha(opacity=60);

opacity: 0.6;

-moz-opacity: 0.8;

}

</style>

function showProgress() {

var updateProgress = $get("<%= UpdateProgress.ClientID %>");

updateProgress.style.display = "block";

}

</script>

</head>

<body>

<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">

<asp:FileUpload ID="uploadfiles1" runat="server" />

<asp:Button ID="btnUpload" Text="Upload" runat="server" onclick="btnUpload_Click" OnClientClick="showProgress()" /><br />

<asp:Label ID="lblMsg" runat="server"/>

</div>

</ContentTemplate>

<asp:PostBackTrigger ControlID="btnUpload" />

</Triggers>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

</body>

</html>

After completion of aspx page create new folder uploads in your application to upload files and add following namespaces in codebehind

C# Code

using System;

using System.IO;

After completion of adding namespaces you need to write the code like as shown below

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnUpload_Click(object sender, EventArgs e)

{

string fileName = Path.GetFileName(uploadfiles1.FileName);

uploadfiles1.SaveAs(Server.MapPath("~/uploads/") + fileName);

lblMsg.Text = "File Uploaded Successfully";

}

VB.NET Code

Imports System.IO

Partial Class VBCode

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub

Protected Sub btnUpload_Click(sender As Object, e As EventArgs)

Dim fileName As String = Path.GetFileName(uploadfiles1.FileName)

uploadfiles1.SaveAs(Server.MapPath("~/uploads/") & fileName)

lblMsg.Text = "File Uploaded Successfully"

End Sub

End Class

Demo

Show Progress Bar when uploading files using AJAX UpdateProgress in ASP.Net

Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

2 comments :

Unknown said...: Thanks its better than any other.; March 8, 2016 at 12:19 AM
Unknown said...: Thank you soo much, It work; July 21, 2019 at 2:09 AM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview