About the author

Vijay Kodali
E-mail me Send mail

Recent comments

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2024

ASP.Net AJAX AsyncFileUpload Control

AsyncFileUpload is a new ASP.NET AJAX Control (Ajax Control Toolkit (v 3.0.30930) released for .NET 3.5 SP1) that allows you asynchronously upload files to server. You don’t need a separate upload button for this control.  Add the AsyncFileUpload control and a label to the web form for the uploading and displaying messages respectively.  HTML:

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" CompleteBackColor="White" 
OnUploadedComplete="AsyncFileUpload1_UploadedComplete" OnUploadedFileError="AsyncFileUpload1_UploadedFileError" 
OnClientUploadComplete="Success" OnClientUploadError="Error" /> 
<asp:Label ID="Label1" runat="server"></asp:Label> 

Server side events:

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 
{ 
 //Fired on the server side when the file successfully uploaded 
   if (AsyncFileUpload1.HasFile) 
   { 
         AsyncFileUpload1.SaveAs(@"C:\Images\" + AsyncFileUpload1.FileName ); 
         Label1.Text = "Received " + AsyncFileUpload1.FileName + " Content Type " + AsyncFileUpload1.PostedFile.ContentType ; 
   } 
 } 
protected void AsyncFileUpload1_UploadedFileError(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 
 { 
 //Fired on the server side when the loaded file is corrupted 
 //Display some error message here 
 } 

Client side events:

OnClientUploadError - The name of a javascript function executed in the client-side if the file uploading failed  

OnClientUploadComplete - The name of a javascript function executed in the client-side on the file uploading completed

function Success() { 
document.getElementById("Label1").innerHTML = "File Uploaded Successfully !!"; 
} 
function Error() { 
document.getElementById("Label1").innerHTML = "File upload failed"; 
} 

We can use  OnClientUploadComplete to clear fileupload control selction,

function Success() { 
document.getElementById ("Label1").innerHTML = "File Uploaded Successfully !!"; 
var fu = document.getElementById("AsyncFileUpload1"); 
document.getElementById("AsyncFileUpload1").innerHTML = fu.innerHTML; 
} 

Reference:  http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx


Posted by vijay on Friday, October 2, 2009 2:48 PM
Permalink | Comments (0) | Post RSSRSS comment feed