In this article I am explain with an example, how to perform asynchronous file upload in ASP.Net using the AsyncFileUpload control in Ajax Control Toolkit.
This example explains the new AsyncFileUpload control, one can upload files asynchronously to server without PostBack or reloading the page.
Download latest AJAX Control Toolkit
Please use the following link to download the latest AJAX Control Toolkit library.
Referencing AJAX Control Toolkit library in your project
You will need to add reference of the AJAX Control Toolkit DLL in your project and then register it using the following @Register directive in the page where you want to use the AsyncFileUpload control.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
HTML Markup
The following HTML Markup consists of an ASP.Net ScriptManager control, AJAX Control Toolkit AsyncFileUpload control, an Image and a Label.
<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"
        UploadingBackColor="#CCFFFF" ThrobberID="imgLoader"
    <asp:Image ID="imgLoader" runat="server"
        ImageUrl="~/images/loader.gif" />
    <br />
   <asp:Label ID="lblMesg" runat="server" Text=""></asp:Label>
Event handlers of the AsyncFileUpload Control
Following are the event handlers of the AJAX Control Toolkit AsyncFileUpload control.
Occurs when the File Upload process fails
Occurs when File Upload is successful
Occurs when File Upload is successful
Handling Server Side AsyncFileUpload event
Inside the OnUploadComplete event handler of the AJAX Control Toolkit AsyncFileUpload control, first the name of the uploaded file is fetched and the using the SaveAs method of the AJAX Control Toolkit AsyncFileUpload control, the file is saved in the desired folder.
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
Handling AsyncFileUpload Client Side events
The Client Side events i.e. OnClientUploadComplete and OnClientUploadError are executed after the response is received from the server.
If the file upload is successful the OnClientUploadComplete event is executed and if it is unsuccessful then the OnClientUploadError event is executed.
<script type = "text/javascript">
    function uploadComplete(sender) {
        $get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded Successfully";
    function uploadError(sender) {
        $get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed.";
Displaying Animation during uploading file
In order to display animation during the process of file uploading, the ThrobberID property is set to the ID of the Image control.
Once set, the AJAX Control Toolkit AsyncFileUpload control will display the Image whenever a file upload is in progress.
ASP.Net AjaxControlTooklit AsyncFileUpload Control Example