.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
david stephan
Gaurav Pal

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

AsyncFileUpload Control - New Control in Ajax Control ToolKit

Posted By:Virendra Dugar       Posted Date: October 07, 2009    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  


Ajax Control Toolkit is not new for every .NET developer. A new version of the AJAX Control Toolkit is now available for download from the CodePlex website. This new version of the AJAX Control Toolkit contains two new controls:

  1. SeaDragon Java Script Code (SJC) - The SJC control allows SeaDragon scripts to be used to display an image, and to zoom in and out of that image using mouse button keys without resizing the window. I saw the demo and it's a really cool control.
  2. AsyncFileUpload - Finally, we have a control which uploads file asynchronously. This new control enables you to perform file uploads without doing a postback. The control displays a throbber image during upload and raises client and server events when the upload is complete. Check the live demo here.

In this article, we are going to take a look at the AsyncFileUpload control.

Note: This control will only work with .NET 3.5 or higher version.

AsyncFileUpload Control Features

As we know, File Upload control of ASP.NET does not work with in update panel. If we want to place it in update panel, then also postback trigger is required to upload the file. This cool control allows you to upload the file in asynchronous manner. Below are few key points about this control:

  1. It works within the Update Panel.
  2. Uploads the file without any postback.
  3. Provides Client Side and Server side events.
  4. Different coloring options for showing file upload. As for example, it shows green color if upload is successful, otherwise it shows red if there is unsuccessful upload.
  5. You can show the loading image while file uploading is in progress.

But it also comes with certain disadvantages.

  1. When I was working with the control, once the file is uploaded there is no way to clear the content of file upload control.
  2. I went into the source code of this control and noticed that the control stores the file in Session. It never clears the session, which means every time to navigate back to the page it loads the last file uploaded into the text box.
  3. There is no way to cancel the upload.
  4. There is no way to monitor the progress (How much % is completed) of uploading.
  5. Uploading starts as soon as you select the file. It stores the files in the session.

Besides these disadvantages, the control looks good.

Now let's go through some of the properties of this control.

Properties and Methods

Some Available Properties

  • CompleteBackColor : This property sets the background color of the control on successful upload. Default Value is "Lime".

  • ErrorBackColor : This Property set the background color of the control on unsuccessful upload. Default Value is "Red".
  • UploadingBackColor : This Property set the background color of the control when file uploading is in progress.

  • UploaderStyle : There are two options available for styling of the control. Traditional and modern. Default is "Traditional".

  • ThrobberID : ID of control that is shown while the file is uploading. It will be used to display the loading/in progress image.

  • HasFile : Returns a bool value which indicates control has a file or not.

Available Events:

  • OnClientUploadError : This is a client side event. If there is an unsuccessful upload then specified JavaScript function will be executed.

  • OnClientUploadStarted : This is also a client side event. Specified JavaScript function will be called when the uploading start. This event will be called before uploading and once this function is executed, uploading will start.

  • OnClientUploadComplete : This is also a client side event. If there is successful upload then specified JavaScript function will be executed.

  • onuploadedcomplete : This is a server side event which will be executed once the uploading is complete. One thing to notice over here is, as soon as you select the file, uploading starts but it remains in session. It is not stored on any physical location. In this event, we can specify the path and save the file into physical location. Things will be clear once we go thru the code.

Available Methods:

  • SaveAs() : This method saves the file on specified path.


Let's create a new website and add a reference of a newly downloaded AjaxControl ToolKit DLL. On default.aspx page, place a script manager and register the Ajax control toolkit DLL.

<%@ Register Assembly="AjaxControlToolkit" 
="AjaxControlToolkit" TagPrefix="cc1" %>
Now let's place the AsyncFileUpload control.
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" 
CompleteBackColor="Lime" UploaderStyle="Modern"
ErrorBackColor="Red" ThrobberID="Throbber"
UploadingBackColor="#66CCFF" />

We can place this within update panel or outside the update panel. As you can see, I have set the most of the properties and events which I have already explained above. Let's place the Throbber control to show in progress image. It is not compulsory to have ThrobberID. If it is set then it will display the content of the control.

I have also placed a label on the page, which shows the status of the uploading. Value of this control get's updated via Client Side function.

Let's place the JavaScript functions.

The UploadComplete function displayes the file name, it's size and content type on the screen.
Below is server side code of UploadedComplete event.

protected void AsyncFileUpload1_UploadedComplete
 (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
  if (AsyncFileUpload1.HasFile)
    string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);

That's it. We are good to go now. Now just run the application.


This is a cool control with some good user experience, but as stated above I cannot find a way to clear the content of the control even if you refresh the page. Another thing that is quite annoying is that as soon as you select any file, it starts uploading. Another lacking feature is that it does not show the progress in percentages. Despite a few disadvantages, I found this control pretty useful. Hope to see some enhancements to this tool.


 Subscribe to Articles


Further Readings:

Author: Oceantrain         Company URL: http://www.dotnetspark.com
Posted Date: September 28, 2011


Thanks for the tutorial. However I am getting 1 error when I run the application.


(the error is occurring in the codebehind in the UploadComplete Event)

(it says: "AjaxControlToolkit.AsyncFileUploadEventArgs' does not contain a definition for 'filename' and no extension method 'filename' accepting a first argument of type 'AjaxControlToolkit.AsyncFileUploadEventArgs' could be found (are you missing a using directive or an assembly reference?)

It seems it is not able to make a connection to the var filename established in the javascript? I'm not sure. Any help would be appreciated.


Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend