Asp.Net AjaxFileUpload Control With Drag Drop And Progress Bar

This Example explains how to use AjaxFileUpload Control With Drag Drop And Progress Bar Functionality In Asp.Net 2.0 3.5 4.0 C# And VB.NET.

Previous Post  I was Explained about the  jQuery - Allow Alphanumeric (Alphabets & Numbers) Characters in Textbox using JavaScript , Fileupload show selected file in label when file selected , Check for file size with JavaScript before uploading .

May 2012 release of AjaxControlToolkit includes a new AjaxFileUpload Control which supports Multiple File Upload, Progress Bar and Drag And Drop functionality.

These new features are supported by Google Chrome version 16+, Firefox 8+ , Safari 5+ and Internet explorer 10 + , IE9 or earlier does not support this feature.

To start with it, download and put latest AjaxControlToolkit.dll in Bin folder of application, Place ToolkitScriptManager and AjaxFileUpload on the page.

HTML SOURCE

---

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>

<asp:AjaxFileUpload ID="AjaxFileUpload1" runat="server" 

                    OnUploadComplete="UploadComplete" 

                    ThrobberID="loader"/>

<asp:Image ID="loader" runat="server" 

           ImageUrl ="~/loading.gif" Style="display:None"/>

ThrobberID is used to display loading image instead of progress bar in unsupported browsers.

Type of files uploaded can be restricted by using AllowedFileTypes property with comma separated list such as "zip,doc,pdf".

Write following code in OnUploadComplete event to save the file.

C#

---

protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)

    {

        string path = Server.MapPath("~/Uploads/") + e.FileName;

        AjaxFileUpload1.SaveAs(path);

    }

VB.NET

---

protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)

    {

        string path = Server.MapPath("~/Uploads/") + e.FileName;

        AjaxFileUpload1.SaveAs(path);

    }




Build and run the code.

I hope this will be helpful for you. I would like to have any feedback from you. 

Your valuable feedback, question, or comments about this article are always welcome.