FileUpload Progress bar using Ajax

Thursday, June 7, 2012

FileUpload Progress bar using Ajax

Introduction:
I explained in my Previous Post about AjaxMaskEdit in http://www.aspdotnetbank-kartik.blogspot.in/2012/02/ajax-maskedit-for-date-validator.html.Now in this Post I am going to explain you about Progress bar using Ajax AsyncFileUpload while FileUpload.

I am Going to show how to use Progressbar while Uploading the File.Here I am Going To Upload file Using FileUpload and while Uploading the File It will show you the Progress bar.First You have to add the AjaxtToolkit as a Reference.and also add the Images Folder inside Project.

Lets Look at .aspx code

Add above <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<head runat="server">
   <title>Example Of Progressbar</title>
   <script type="text/javascript">
   // This function will execute after file uploaded successfully
   function uploadComplete() {

   document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
   }
   // This function will execute if file upload fails
   function uploadError() {
   document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
   }
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div>
   <ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
   <ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"
   CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Traditional"
   UploadingBackColor="#CCFFFF" ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" />
   <br />
   <asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
   <br />
   <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
   </div>
   </form>
</body>

If you Look at above code UploaderStyle="Traditional" in that there are two option "Morden" and "Traditional" both have different Look for FileUploader.Here i have used Traditional.while OnUploadedComplete="fileUploadComplete" specify the Method for Uploading code in aspx.cs Page.

Now Lets Look at aspx.cs Page code : You have to just the Method fileUploadComplete in aspx.cs page.

using System.Threading;
using AjaxControlToolkit;

protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
   Thread.Sleep(5000);
   string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
   fileUpload1.SaveAs(Server.MapPath("Images/") + filename);
  }
Here I have used Thread.Sleep Method Because If you are Going to Upload the small file then also you can see the Progress bar.Thread.Sleep(5000) will suspend the execution of code for 5 second.

Note:If your aspx Page uses any master page then specify the attribute ClientIDMode="AutoID" in <ajax:AsyncFileUpload ....> Tag

Demo: