Upload multiple files using AjaxFileUpload

Microsoft ASP.NET AjaxControlToolkit has recently published a multiple file upload. That allows you to upload multiple files at a time with Drag and drop user interface.

First we will see, how to use AjaxFileUpload control in asp.net site.

Open new project in Visual studio. I am using visual studio 2010.

In default page, add script manager, Update panel. You can also add update progress (optional).

For using AjaxFileUpload, you need to download latest AjaxControlToolkit from codeplex site. If you don't know how to add that to your visual studio then refer this link.

Now you can see AjaxFileUpload in Ajax Toolkit. Add that to update panel and edit the code as below.

<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" AllowedFileTypes="jpg,jpeg,png,gif" MaximumNumberOfFiles="10" OnUploadComplete="File_Upload"/>

AllowedFileTypes : Defines which files are allowed to be uploaded

MaximumNumberOfFiles : Defines maximum number of files.

OnUploadComplete :  Defines the function for uploading the file. It runs when each file completes its uploading. Suppose, 5 files we selected to upload, then File_Upload functions run after 1st file uploaded, again runs when 2nd file uploaded and so on. But everything done is asynchronously and user doesnt find any break during uploading.


Now we will see the code behind it, in aspx.cs file

protected void File_Upload(object sender, AjaxFileUploadEventArgs e)
{
   var ajaxUpload = (AjaxFileUpload)sender; 
   string strLongFilePath = e.FileName;
   string strFileExtension = System.IO.Path.GetExtension(strLongFilePath);
   char[] ch = new char[] { '\\' };
   string[] strPath = strLongFilePath.Split(ch);
   string strInternalFileName = DateTime.Now.ToFileTime().ToString() + strFileExtension;
   string strDestPath = Server.MapPath("~/Uploads/");
   ajaxUpload.SaveAs(@strDestPath + strInternalFileName);
  //Save path, filename to database here
}
Your files can be uploaded now.

Build and Run the project.

Download Sample Code