AjaxControlToolkits AsyncFileUpload Control

Finally , the wait for a control to upload files asynchronously is over.AjaxControlToolkit latest release has introduced new control called AsyncFileUpload control which is compatible with UpdatePanel and can be used to upload files asynchronously.You can download the latest release from the following URL:-

AsyncFileUpload Control

Following is one very simple and short example explaining the usage of the newly introduced control :-

MarkUp

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="src">
</asp:ScriptManager>
<div>
<asp:UpdatePanel runat="server" ID="upd" UpdateMode="Conditional">
<ContentTemplate>
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" UploaderStyle="Traditional"
runat="server" OnClientUploadStarted="Start" ThrobberID="imgThrobber"
OnClientUploadComplete="Fire"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnClick" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<input type="button" id="btnCheck" onclick="FileUpload();" value="Upload Files Client Side" />
<asp:Button runat="server" ID="btnClick" Text="Upload File Server Side" OnClick="btnClick_Click" />
<img alt="Trial" src="ajax-loader.gif" id="imgThrobber" runat="server" />
</div>
</form>
</body>
</html>

Client Side Code

function FileUpload() {
var asyncFileUpload = $find('AsyncFileUpload1');
alert(asyncFileUpload.get_postBackUrl());
alert($get('AsyncFileUpload1_ctl00').value);
// do something
}

function Fire() {
var asyncFileUpload = $find('AsyncFileUpload1');
// do something
}

function Start() {
var asyncFileUpload = $find('AsyncFileUpload1');
// do something
}

protected void btnClick_Click(object sender, EventArgs e)
{
if (AsyncFileUpload1.HasFile)
{
AsyncFileUpload1.SaveAs(@"C:\Upload Files\" + AsyncFileUpload1.PostedFile.FileName);
}
}

Well the above example is fairly basic but whats interesting is that the control offers the same properties to work with in code behind which are offered by
the regular asp:FileUpload control.As we can see above I have wrapped the control inside the updatepanel and then in code behind I am uploading the file to some temp directory.The whole process of uploading file takes place asynchronously, without a full page postback.So now we can happily upload files through controls like "ModalPopUpExtender" with the help of "AsyncFileUpload" control whithout refreshing the pop-up screen.

Lets have a look at some other properties of AsyncFileUpload Control :-

  • ThrobberId : Id of the control which will be shown while the file is being posted by the "AsyncFileUpload" control.As explained in the above sample code , we can use this attribute to show some "Loading..." kind of image during the process of posting of file.You can work with file only if it is posted properly by the control.For this the control offers certain color scheme to notify the end user whether the file is posted correctly or not.If file is posted correctly the background color of the control will turn to Green and if there is an error then background color will turn to Red .Also we can change this color scheme as per our preference.
  • OnClientUploadStarted and OnClientUploadComplete : These are client side events offered by the control wherein the former event will be fired once the posting of file has started and later being fired once the process of posting of file has completed.We can handle these events on client side to perform extra functionality while the file is being posted.In the above example I have show how we can access the control in our client side code.The control offers various getter and setter method which we can use in our client side code to manipulate certain attributes of the control programmatically.In the above posted client side code I am alerting the postback URL and the name of the file which is currently being posted.You can check out my other blog in which I have explained on how to work with "AjaxControlToolkit" extender controls effectively in our client side code.Blog :- Working With AjaxControlToolkit.
  • UpdateStyle : It offeres two mode "Traditional" and "Modern".By default "UpdateStyle" is set to "Traditional" which resembles with the regular asp:FileUpload control.In case of "Modern" the control offers a more stylish look.But I am facing certain difficulties  in working with "Modern" styling as the control is not getting cleared once I have successfully uploaded the file into some temp directory.With "Traditional" styling everything works fine.
  • OnClientUploadError : :- Like the previously mentioned client side events , this event is fired if in case there is some error in posting the file by the control.We can handle this event to do some cleanup task or notify the users with a more "user friendly" message .
Published Tuesday, October 20, 2009 9:51 PM by Pawan_Mishra
Filed under:

Comments

# re: AjaxControlToolkits AsyncFileUpload Control

Wednesday, June 23, 2010 5:36 AM by JJ

Hi,

Thanks for the details. It helped me a lot in the project.

# re: AjaxControlToolkits AsyncFileUpload Control

Thursday, November 18, 2010 5:22 AM by IK

Hi

I've done the same as in your example

But I have AsyncFileUpload1.HasFile  =  FALSE after postback and FileName = ""

# re: AjaxControlToolkits AsyncFileUpload Control

Wednesday, April 20, 2011 1:16 AM by arpan

how to bind a list box on uploaded complete event of file Asyncuploadcontrol

# re: AjaxControlToolkits AsyncFileUpload Control

Monday, June 20, 2011 11:07 AM by sandyapriya

I tried this code but it did not work for me it is giving AsyncFileUpload1.HasFile as false

# re: AjaxControlToolkits AsyncFileUpload Control

Tuesday, March 27, 2012 10:46 AM by Emma

Wonderful post. I learned many interesting things. Thank you)

# re: AjaxControlToolkits AsyncFileUpload Control

Saturday, December 29, 2012 11:47 PM by Matheny

Hey there! I could have sworn I’ve been to this site

before conversely after browsing through some of

that the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be

book-marking and checking back frequently!

# re: AjaxControlToolkits AsyncFileUpload Control

Friday, January 11, 2013 8:19 PM by German

All that the great facts about News manner greatly to us.

# re: AjaxControlToolkits AsyncFileUpload Control

Thursday, October 17, 2013 5:46 AM by M_Sonic

i want to upload multiple files can i select it by pressing ctrl or shift??

and i want tosave the filename by comma seperated to the database

pls need a help

# re: AjaxControlToolkits AsyncFileUpload Control

Thursday, October 17, 2013 10:47 AM by M_Sonic

AsyncFileUpload1.HasFile always return false :( :( :( need help

Leave a Comment

(required) 
(required) 
(optional)
(required)