Ajax AsyncFileUpload Control

Ajax revolutionizes the concept of web pages by introducing a novel approach known as Partial-page rendering, enabling the seamless updating of specific sections of a webpage without requiring a full page reload. Within the Ajax Control Toolkit lies a comprehensive collection of controls that empower developers to construct exceptionally responsive and interactive Ajax-enabled web applications.


One noteworthy control in the toolkit is the AsyncFileUpload, an ASP.NET AJAX Control that facilitates the asynchronous uploading of files to a server. By leveraging this control, file uploads can occur without triggering a postback, resulting in a smoother and more user-friendly experience. Moreover, the control offers the ability to verify file uploading results on both the server and client sides, ensuring comprehensive error handling and validation.


To enhance the user experience further, it is possible to display a loading image while the file uploading process is underway, providing visual feedback to users. Additionally, developers can employ the SaveAs() method within a server UploadedComplete event handler to effortlessly store the uploaded file on the server, completing the file upload process seamlessly and efficiently.

if (AsyncFileUpload1.HasFile) { AsyncFileUpload1.SaveAs(@"C:\upload\" + AsyncFileUpload1.FileName); }
If AsyncFileUpload1.HasFile Then AsyncFileUpload1.SaveAs("C:\upload\" + AsyncFileUpload1.FileName) End If

The following Asp.Net Ajax program shows how to integrate an AsyncFileUpload to your web application. To use the Ajax Control Toolkit in your Visual Studio project, you should add reference to the AjaxControlToolkit.dll in your project.


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function clientMessage() { document.getElementById("Label1").innerHTML = "File Uploaded Completed "; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="sm1" runat="server" /> <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" UploadingBackColor="#82CAFA" CompleteBackColor = "#FFFFFF" OnUploadedComplete="doUpload" OnClientUploadComplete="clientMessage" ThrobberID="Throbber" /> <asp:Image ID="Throbber" runat="server" ImageUrl = "https://net-informations.com/asp/ajax/img/throbber.gif" /> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> <br /> </div> </form> </body> </html>
Full Source | C#
using System; using System.Web.UI; public partial class _Default : System.Web.UI.Page { protected void doUpload(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) { System.Threading.Thread.Sleep(4000); if (AsyncFileUpload1.HasFile) { AsyncFileUpload1.SaveAs(@"C:\upload\" + AsyncFileUpload1.FileName); } } }
Full Source | VB.NET
Partial Class _Default Inherits System.Web.UI.Page Protected Sub doUpload(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) System.Threading.Thread.Sleep(4000) If AsyncFileUpload1.HasFile Then AsyncFileUpload1.SaveAs("C:\upload\" + AsyncFileUpload1.FileName) End If End Sub End Class