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
Hope you liked this article. You can download the sample source code using the link below
AsyncFileUpload.zip (5.36 mb)