Click here to Skip to main content
15,867,316 members
Articles / Web Development / XHTML

AsyncFileUpload Control - New Control in Ajax Control ToolKit

Rate me:
Please Sign up or sign in to vote.
4.89/5 (34 votes)
18 Oct 2013CPOL5 min read 415.1K   14.8K   70   74
This article demonstrates how to use the newly launched AsyncFileUpload control of Ajax Control Toolkit.

Introduction

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 within 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 an asynchronous manner. Below are few key points about this control:

  1. It works within the Update Panel
  2. It uploads the file without any postback
  3. It provides Client Side and Server side events
  4. There are 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".

    Image 1

  • ErrorBackColor: This property sets the background color of the control on unsuccessful upload. Default Value is "Red".

  • UploadingBackColor: This property sets the background color of the control when file uploading is in progress.

    Image 2

  • 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 whether control has a file or not.

Available Events

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

  • OnClientUploadStarted: This is also a client side event. The specified JavaScript function will be called when the uploading starts. 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 a successful upload, then the 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 through the code.

Available Methods

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

Using the Code

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.

ASP.NET
<%@ Register Assembly="AjaxControlToolkit" 
	Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Now let's place the AsyncFileUpload control:

ASP.NET
<cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" 
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" 
OnClientUploadComplete="UploadComplete" 
CompleteBackColor="Lime" UploaderStyle="Modern" 
ErrorBackColor="Red" ThrobberID="Throbber" 
onuploadedcomplete="AsyncFileUpload1_UploadedComplete" 
UploadingBackColor="#66CCFF" />

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

ASP.NET
<asp:Label ID="Throbber" runat="server" Style="display: none">
<img src="Images/indicator.gif" align="absmiddle" alt="loading" />
</asp:Label>

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

ASP.NET
<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; 
	font-size: small;"></asp:Label>

Let's place the JavaScript functions:

JavaScript
<script type="text/javascript" language="javascript">

function uploadError(sender,args)
{
document.getElementById('lblStatus').innerText = args.get_fileName(), 
	"<span style='color:red;'>" + args.get_errorMessage() + "</span>";
}

function StartUpload(sender,args)
{
  document.getElementById('lblStatus').innerText = 'Uploading Started.';
}

function UploadComplete(sender,args)
{
 var filename = args.get_fileName();
 var contentType = args.get_contentType();
 var text = "Size of " + filename + " is " + args.get_length() + " bytes";
 if (contentType.length > 0)
 {
  text += " and content type is '" + contentType + "'.";
  }
  document.getElementById('lblStatus').innerText = text;
}

</script>

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

C#
protected void AsyncFileUpload1_UploadedComplete
	(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
  System.Threading.Thread.Sleep(5000);
  if (AsyncFileUpload1.HasFile)
  {
    string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);
    AsyncFileUpload1.SaveAs(strPath);
  }
}

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

Conclusion

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.

Also, Read my series of articles on ASP.NET 5

Enjoy. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India
I am an experienced Software Developer with 11+ years of hands-on experience working with Microsoft.NET technology (ASP.NET, ASP.NET Core, C#, SQL Server, Angular).

Visit Talking Dotnet
For ASP.NET Core, read ASP.NET Core Articles

Comments and Discussions

 
QuestionProblem- keypress Pin
Chi Ming Pun18-Sep-12 15:25
Chi Ming Pun18-Sep-12 15:25 
Questionjavascript Pin
tripti69013-Aug-12 21:36
tripti69013-Aug-12 21:36 
AnswerRe: javascript Pin
Talking Dotnet13-Aug-12 22:44
Talking Dotnet13-Aug-12 22:44 
QuestionSave imageFilePath into DB Pin
Member 84779582-Jul-12 0:38
Member 84779582-Jul-12 0:38 
Questionhi Pin
premjit mohanty8-May-12 2:45
premjit mohanty8-May-12 2:45 
AnswerRe: hi Pin
Talking Dotnet8-May-12 3:02
Talking Dotnet8-May-12 3:02 
GeneralRe: hi Pin
premjit mohanty8-May-12 20:06
premjit mohanty8-May-12 20:06 
GeneralMy vote of 5 Pin
SureshNagalla8-Feb-12 19:35
SureshNagalla8-Feb-12 19:35 
Virendra Sir have given Excellent idea regarding this newly introduced control.
Questionhow to... Pin
Herman<T>.Instance24-Jan-12 3:39
Herman<T>.Instance24-Jan-12 3:39 
AnswerRe: how to... Pin
Member 360026924-Apr-12 22:28
Member 360026924-Apr-12 22:28 
GeneralMy vote of 5 Pin
AmirHashemZadeh18-Nov-11 22:26
professionalAmirHashemZadeh18-Nov-11 22:26 
GeneralRe: My vote of 5 Pin
Talking Dotnet26-Dec-11 23:20
Talking Dotnet26-Dec-11 23:20 
GeneralIE 9 - problems Pin
wzoras31-May-11 5:18
wzoras31-May-11 5:18 
GeneralRe: IE 9 - problems Pin
sheppe6-Jul-11 8:46
sheppe6-Jul-11 8:46 
GeneralRe: IE 9 - problems Pin
wzoras18-Aug-11 4:32
wzoras18-Aug-11 4:32 
GeneralMy vote of 5 Pin
planetregin4-May-11 3:45
planetregin4-May-11 3:45 
GeneralRegarding deleting file in AsyncFileUpload Control Pin
anurag.veda1-Apr-11 0:39
anurag.veda1-Apr-11 0:39 
GeneralRe: Regarding deleting file in AsyncFileUpload Control Pin
Talking Dotnet1-Apr-11 1:00
Talking Dotnet1-Apr-11 1:00 
GeneralMy vote of 5 Pin
djanardhanan28-Jan-11 2:27
djanardhanan28-Jan-11 2:27 
GeneralFile type filter Pin
Prasenjit Purohit29-Nov-10 2:14
Prasenjit Purohit29-Nov-10 2:14 
GeneralRe: File type filter Pin
Talking Dotnet29-Nov-10 2:22
Talking Dotnet29-Nov-10 2:22 
QuestionRe: File type filter Pin
Prasenjit Purohit29-Nov-10 18:21
Prasenjit Purohit29-Nov-10 18:21 
QuestionHow do you specify a ftp host and credentials? Pin
lianaent24-Nov-10 13:41
lianaent24-Nov-10 13:41 
GeneralMy vote of 5 Pin
NebojsaKg22-Nov-10 3:57
NebojsaKg22-Nov-10 3:57 
GeneralRe: My vote of 5 Pin
Talking Dotnet23-Nov-10 17:40
Talking Dotnet23-Nov-10 17:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.