In this article I will explain with an example, how to use Ajax Control Toolkit AsyncFileUpload control in ASP.Net.
This example explains the new AsyncFileUpload control, one can upload files asynchronously to server without PostBack or reloading the page.
You might also like to read:
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 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
