AsyncFileUpload Control
Welcome to another AJAX tutorial, In Todays Tutorial we will learn about AsyncFileUpload Control and its Awesome functions.
AsyncFileUpload control is the new addition in the AJAX Control Toolkit library. This enables you to perform file uploads without performing a postback. The control displays an upload progress image during upload and raises client and server events when the upload is complete. So in Other Words it gives an Updates status for your end user who happens to uploading something to the application or server. Which is pretty cool?
Did you know?
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Control events
OnClientUploadError : client side event which occurs when the uploading fails
OnClientUploadComplete: client side event which occurs when the uploading is successful
Onuploadedcomplete: server side event which occurs when the uploading is successful
Demonstration
In this sample, you will learn how to use an AsyncFileUpload control extender
· Add New WebForm to this project and name it AsyncFileUploadSample.aspx.
· Add a ScriptManager to the page.
· Add an AsyncFileUpload control extender to the page. You can specify the id of progress image you want to show up in the ThrobberID. Add the two client side events and one server side event mentioned above.
· Add a Label control to display the success or error messages
The markup of the page will look like
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AsyncFileUploadSample.aspx.cs"
Inherits="AsyncFileUploadSample" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AsyncFileUpload Sample</title>
<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>
</head>
<body>
<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="AsyncFileUpload1_UploadedComplete" />
<asp:Image ID="imgLoader" runat="server" ImageUrl="progress.gif" />
<br />
<asp:Label ID="lblMesg" runat="server" Text=""></asp:Label>
</form>
</body>
</html>
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
Add the following in the code behind
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(5000);
string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
AsyncFileUpload1.SaveAs(Server.MapPath("FileUploads/") + filename);
}
Here Threading.Sleep is invoked to cause the delay so as to see the progress image when the file is uploaded. The final output can be tested in the browser, And when you select a file to upload you can see the progress image on the right to the file upload control.
Thank You For Vising AJAXTutorials.com
We Look forward to your feedback if there is a particular Tutorial or Subject you would like to see please feel free to suggest it in our Suggest a Tutorial Section.
