Welcome to another AJAX tutorial, In this tutorial we will learn about AsyncFileUpload Control and its awesome functions.

In this example we used Visual Studio 2010, if you do not have visual Studio; you may also Use Visual Web Developer 2010 which is a Free Download from Microsoft

This is a very dynamic AJAX control; it is very flexible and very useful to businesses that need to upload items to a webpage without having to perform postbacks and if set up properly can upload multiple files simultaneously.

You can find many variations of this tool in many of your favorite websites and social networks, even job Boards where you would upload your resume.

AsyncFileUpload control is the newest addition in the AJAX Control Toolkit library. This control 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 update status for your end user who happens to be uploading something to the application or server. Which is pretty cool?

Did you know?

We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

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

Let’s build the application

1. Add a new WebForm to this project and name it AsyncFileUploadSample.aspx.
2. Add a ScriptManager to the page.
3. 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.
4. Add a Label control to display the success or error messages
5. The markup of the page will look like

Code Block
Ask a Question
Download Source
Default.aspx
It is extremely easy to use Visual Studio to build a new page.
<%@ 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 id="Head1" 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> 

We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting! 

Add the following in the code behind
The Explanation Behind the C#

Here Threading.Sleep is invoked to cause the delay so we can 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.

Code Block
Ask a Question
Download Source
Default.aspx.cs

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);    
 
    } 
As You Can see you can now Upload files see the progress and the C# code behind gives a little delay so your end user can see when the files is finished.

This is essential if you have a social community such as a message board or a forum chat where you would like you user to upload pictures to their particular profiles. In the coming weeks we will dive further into this control and explore some more ways we can use it.

We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.


 So we hope you enjoyed our nifty AJAX tutorial, we try to keep things simple so you may understand what is going on, as these Controls start to get a little more complex we will also get into more details.

We encourage you to develop some controls and get creative, we have the latest AJAX Information on AJAXTutorials.com and if you ever need more tutorials you can always look here or suggest some.

If you have questions regarding this or any tutorials please feel free to comment below.


We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

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.

AsyncFileUploadSample.zip