aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Ajax Fileupload Control to Upload Multiple files with Drag Drop and Progress Bar in ASP.Net

Aug 18, 2016

Here I will explain how to upload multiple files / images with drag and drop in using ajax fileupload control in c#, with example or show progress bar while uploading files using ajax file upload control in example in c#,  or upload files with progress bar using ajax fileupload control in with examples. By using ajax fileupload control we can upload multiple files / images in with drag drop and we can show progress bar while uploading files easily with few configurations in c#, with example.

Before we start implement the code we need to install Ajax control toolkit in our visual studio for that download the file from this url Ajax control toolkit.

Once downloaded the file start install it and follow the instructions which showing in screen automatically it will install all the controls in visual studio. Once installation done ajax controls will be like as shown below in visual studio.

Once our controls installation done create one new web application --> Now Drag and drop AjaxFileUpload control from Ajax control toolkit into your aspx page. Once we add AjaxFileUpload control our page code will be like as shown below

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
<title>Upload Files or Images in without postback</title>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" Width="500px" AllowedFileTypes="jpg,jpeg,png" MaximumNumberOfFiles="4" OnUploadComplete="AjaxFileUpload1_UploadComplete" />

If you observe above AjaxFileUpload control we added multiple properties by using those properties, we can set our restrictions while uploading files.

AllowedFileTypes: By using this property we can restrict type of files that need to be uploaded.

MaximumNumberOfFiles: By using this property we can restrict number of files that a user can added to upload queue.

OnUploadComplete: This property will call server side event to upload files and it will raise whenever we click upload button in Ajaxfileupload control.

Now add uploads folder to your application to upload files once finished adding folder then open code behind file and write the code like as shown below.

C# Code

using System;
using System.IO;

After completion of adding namespaces you need to write the code like as shown below

protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
string fileName = Path.GetFileName(e.FileName);
AjaxFileUpload1.SaveAs(Server.MapPath("~/uploads/" + fileName));


Imports System.IO
Imports AjaxControlToolkit

Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub AjaxFileUpload1_UploadComplete(ByVal sender As Object, ByVal e As AjaxFileUploadEventArgs)
Dim fileName As String = Path.GetFileName(e.FileName)
AjaxFileUpload1.SaveAs(Server.MapPath("~/uploads/" & fileName))
End Sub
End Class

Now open web.config file add following handlers to avoid Ajax fileupload errors while uploading files.

IIS6 or Visual Studio 2010 or Earlier Versions

If you are using visual studio 2010 or IIS6 or earlier versions add following code under system.web like as shown below

<add verb="*" path="AjaxFileUploadHandler.axd"

IIS7 or Visual Studio 2012 or Higher Version

If you are using visual studio 2012 or IIS7 or higher versions add following code under system.webServer like as shown below

<validation validateIntegratedModeConfiguration="false" />
<add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>

Once we finished adding all the details now run the application and check the output.


Following is the demo of uploading files in without page refresh using Ajax fileupload.

Upload Files (Images) in without Postback using Ajax File Upload
This is how we can use Ajax fileupload control to upload files in without page referesh or postback.

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...


st said...

not working while save fileName, fileSize, filePath to database

Anonymous said...

Can you please post your sample codes/projects?

Technologies for Web Development said...

Not working in Internet Explorer.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.