In this article I am 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


Download latest AJAX Control Toolkit

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" %>


Working with AsyncFileUpload Control

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">


    <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>



AsyncFileUpload Control events






Occurs when the File Upload process fails



Occurs when File Upload is successful



Occurs when File Upload is successful


Handling the Server Side event

Now Server side we will handle the OnUploadedComplete event in the following way


protected void FileUploadComplete(object sender, EventArgs e)


    string filename  = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);

    AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename);   




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

   Dim filename As String=System.IO.Path.GetFileName(AsyncFileUpload1.FileName)

   AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename)

End Sub

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


Handling the Client Side events

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.";



As you’ll notice I 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.


Loading Animation

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

ASP.Net AjaxControlTooklit AsyncFileUpload Control Example

Hope you liked this article. You can download the sample source code using the link below (5.36 mb)