In this tutorial we are explaining how to use the new ASP.Net AJAX Control Toolkit AsyncFileUpload Control.AsyncFileUpload control is the new addition in the AJAX Control Toolkit library

To download the latest AJAX Control Toolkit library use the link below

Download ASP.Net AJAX Control Toolkit

Adding reference to your project

Once you downloaded the AJAX Control Toolkit library Unzip and add its reference in your Website project and build it.Once the reference is added,add the following tag in your web page

<%@ Register Assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"
TagPrefix="cc1" %>

After adding the tag you can add the AsyncFileUpload control to your web page in the following way

<form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
         <cc1:AsyncFileUpload OnClientUploadError="uploadError"
                OnClientUploadComplete="uploadComplete" runat="server"
                ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
                CompleteBackColor = "White"
                UploadingBackColor="#CCFFFF"  ThrobberID="imgLoader"
                OnUploadedComplete = "FileUploadComplete"
         />
         <asp:Image ID="imgLoader" runat="server"
                  ImageUrl = "~/images/loader.gif" />
         <br />
         <asp:Label ID="lblMesg" runat="server" Text=""></asp:Label>
</form>

Handling the Server Side event

protected void FileUploadComplete(object sender, EventArgs e)
{
     string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
     AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename); 
}

As you will notice We are simply saving the file as we do for our traditional ASP.Net FileUpload Control in a folder called Uploads in my website root folder.

Similar to Server Side events you can also handle Client Side events as shown below

<script type = "text/javascript">
         function uploadComplete(sender) {
                  $get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded
                  Successfully";
         }
         function uploadError(sender) {
                  $get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed.";
         }
</script>

As you’ll notice we have calling the functions uploadComplete and uploadError on the OnClientUploadComplete and OnClientUploadError events of the AsyncFileUpload Control respectively.Based on the whether the file upload succeeds or fails appropriate event is called up.

In order to display the loading animation,you’ll need to add an image control that will display animated GIF when the File Upload starts.You need to specify the ID of the Image Control to the AsyncFileUpload Control using the ThrobberID property