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:-
- AjaxControlToolkit Release 33804 , September 30th 2009 :- http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804
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 .