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

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

 

AsyncFileUpload Control events

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 the Server Side event

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

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


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

    }

</script>


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

AsyncFileUpload.zip (5.36 mb)