Asp.Net AjaxFileUpload Control With Drag Drop And Progress Bar

1:43:00 am 7 Comments

This Example explains how to use AjaxFileUpload Control With Drag Drop And Progress Bar Functionality In Asp.Net.

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.

AjaxFileUpload Control Example with Drag Drop And Progress Bar

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#
1protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
2    {
3        string path = Server.MapPath("~/Uploads/") + e.FileName;
4        AjaxFileUpload1.SaveAs(path);
5    }
VB.NET
1protected void UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
2    {
3        string path = Server.MapPath("~/Uploads/") + e.FileName;
4        AjaxFileUpload1.SaveAs(path);
5    }
Build and run the code.

Download Sample Code

Unknown

7 comments:

  1. douglasbarbin11 July 2012 at 11:56

    This comment has been removed by the author.

    ReplyDelete
  2. douglasbarbin11 July 2012 at 12:21

    The "VB.NET code" is just the C# code copied and pasted again. It should look something like this:

    Protected Sub UploadComplete (sender as Object, e as AjaxControlToolkit.AjaxFileUploadEventArgs)

    Dim path as String = Server.MapPath("~/Uploads/" & e.FileName
    AjaxFileUpload1.SaveAs(path)

    End Sub

    ReplyDelete
  3. Denzil Sequeira28 July 2012 at 11:59

    The maximum number of files field isnt working... Can You Please Help.... Thanks in Advance

    ReplyDelete
  4. Unknown5 September 2012 at 04:06

    Very fine exsample!!! But why doesn't the code show what is going on! What about the drag'n drop and the progressbar... ...please!! :o)

    ReplyDelete
  5. Anonymous18 October 2012 at 07:30

    How do you apply custom styles to the buttons and messages?
    I can only find following properties to set in css :

    .ajax__fileupload_selectFileContainer {position: relative;float: left;right: 0px;}
    .ajax__fileupload_dropzone {border:dotted 1px #B2D1E0 !important;color:#B2D1E0 !important;}

    Anyone knows the other properties (for the buttons etc.)?

    ReplyDelete
  6. aussie200318 January 2013 at 15:46

    I donwloaded this sample - it runs fine but no upload of the files to the server????

    ReplyDelete
  7. Anonymous27 June 2013 at 00:32

    Greate sample code ty :)

    ReplyDelete

Subscribe to: Post Comments (Atom)