In this article I am explain with an example, how touse the 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">
    </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>
 
 
Event handlers of the AsyncFileUpload Control
Following are the event handlers of the AJAX Control Toolkit AsyncFileUpload control.
Property
Type
Significance
OnClientUploadError
Client
Occurs when the File Upload process fails
OnClientUploadComplete
Client
Occurs when File Upload is successful
OnUploadedComplete
Server
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.
C#
protected void FileUploadComplete(object sender, EventArgs e)
{
    string filename  = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
    AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename);   
}
 
VB.Net
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.";
    }
</script>
 
 
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.
 
 
Screenshot
Using ASP.Net AJAX Control Toolkits AsyncFileUpload Control
 
 
Downloads