Aspdotnet-Suresh

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

Ajax AsyncFileUpload control example in asp.net to upload files to server

Apr 28, 2012
Introduction:

Here I will explain how to use Ajax AsyncFileUpload control to upload files to folder and show progress bar during upload files to server using asp.net

Description:

Previously I explained many articles relating to Ajax. Now I will explain how to use ajax AsyncFileUpload control to upload files to folder in asp.net. Before proceed to implement sample have you install ajaxcontroltoolkit in visual studio or not if not install it otherwise if you already done then follow the below steps to implement Ajax AsyncFileUpload control example in asp.net.

First create one new website after that right click on it add new folder and give name as ‘Files’ after that add AjaxControlToolkit reference to your application and add following line in your aspx page
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

Once add above references design your aspx page will be likes this

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
// This function will execute after file uploaded successfully
function uploadComplete() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
}
// This function will execute if file upload fails
function uploadError() {
document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
<div>
<ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="#CCFFFF"
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
<asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
If you observe above code I define lot of properties to ajax:AsyncFileUpload now I will explain all the properties of Ajax fileupload control

OnClientUploadComplete – This property is used to execute the client side JavaScript function after file successfully uploaded.

OnClientUploadError – This property is used to execute the client side JavaScript function if file uploading failed.

OnClientUploadStarted – This property is used to execute the client side JavaScript function whenver file uploading start.

CompleteBackColor – This property is used to set fileupload control background after file upload complete its default value ‘Lime’.

ErrorBackColor – This property is used to set fileupload control background if file upload failed its default value ‘Red’.

UploadingBackColor – This property is the id of the control which is seen during upload file.

UploaderStyle – This property is used to set fileupload control appearance style either Modern or Traditional. By default its value "Traditional".

ThrobberIDID of control that is shown while the file is uploading.

Width – This property is used to set width of the control. By default its value ‘355px’

Now in code behind add following namespaces

C# Code

using System;
using System.Web.UI;
using AjaxControlToolkit;
After completion of adding namespaces write following code in code behind


protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/") + filename);
}
VB Code


Imports System.Web.UI
Imports AjaxControlToolkit
Partial Class Default
Inherits System.Web.UI.Page
Protected Sub fileUploadComplete(ByVal sender As Object, ByVal e As AsyncFileUploadEventArgs)
Dim filename As String = System.IO.Path.GetFileName(fileUpload1.FileName)
fileUpload1.SaveAs(Server.MapPath("Files/") & filename)
End Sub
End Class
Demo
Download sample code attached


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

Get the latest Asp.net, C#.net, 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

38 comments :

suresh gupta said...

Sir in above example everytime it is showing file uploaded successfully but i want to know when uploaderror function will be called displaying upload error.
Thanks in advance.

Suresh Dasari said...

@Suresh Gupta....
Every time that is showing file uploaded successfully mean it's uploading files to folder without having any error. In case some errors occur during upload files it will execute uploadError function....

suresh gupta said...

sir I mean to ask that is there any restriction on size of data that can be uploaded ??and if more size of data is uploaded then will it call uploaderror function?

Suresh Dasari said...

@Suresh Gupta...
Yeah size restriction is there if we upload large size of files then that will call uploaderror function

Anonymous said...

Sir, i want to display progress bar like 1%, 2%, .....100% upload completed bar, instead of an image.

SaudiTamilan said...
This comment has been removed by the author.
SaudiTamilan said...

Sorry.In my last comment,I mistype as "It is show" behalf of "It is not show".Then i reinstall the AJAX.Now in the function the error "'innerhtml' object is null or undefined" is displayed.I'm using IE 9.What i have to do ?

Anonymous said...

Sir.I am having problem with the above code and it is giving me the following error-
Could not load type 'System.Web.UI.ScriptReferenceBase' from assembly 'System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'.
Sir,I will be highly obliged if you please solve the problem.

Anonymous said...

Sir, can i see the image on my page before upload and ask for confirmation for saving

Anonymous said...

hi sir ur code is very useful and simple to understand bt when i am debugging the code it is showing no source code available plz gve reply

Anonymous said...

protected void fileUploadComplete(object sender,AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
string ext = System.IO.Path.GetExtension(this.fileUpload1.PostedFile.FileName).ToUpper() ;
if (ext == ".JPG" || ext == ".JPEG" || ext == ".GIF" || ext == ".PNG")
{
int fileSize = fileUpload1.PostedFile.ContentLength;
if (fileSize <= 4096)
fileUpload1.SaveAs(Server.MapPath("~/Files") + filename);
else
DisplayClientError("file size should be less than 4kb");

}
else
DisplayClientError("Only Jpg,jpeg,png,gif files are accepted");
}

is the code i hve written

Anonymous said...

Hi sir, it is really a nice article. Thank u very much...
I want to know 1 thing. Can we set any default directory for Upload control..?? Means initially the Upload control should have a default directory and if user wants different directory he can browse for new directory..
Thanks in advance.

Unknown said...

AsyncFileUpload problem

http://forums.asp.net/t/1620604.aspx/1

$urajbharati said...

hi,
Friends,
i'm working with ajax control and while running the program getting error system.web.ui.scriptrefrence from assembly, system.web.extensions.
I'm a new learner of ajax so plz help someone if know the solution.

Anonymous said...

works fine
simply increase the size of a file

add in web.config file
in system.web

httpRuntime maxRequestLength="40960"
...
...

pradip baria said...

sir i want to upload maximum 6 images and want to display thumbnails of image ...

can you provide solution i tired but not get solution

request to you to help me sir needed in my project

Anonymous said...

sir can you give me the code for uploading and downloading mobile software files (like .apk, etc...) and 1 minute or 5 minute (mobile supported ) video files using ajax control
Thank you

Unknown said...

Hi Suresh,
i got issue by using your code i.e;in IE 10 when file uploaded i got web page error 'unknown server error'. whats is happens in code i con't finding .So pls give me solution.

Anonymous said...

hi suresh
it is so good
but we have a problem , can you solve it,
the problem is : when we upload file such as "a.jpg" and then try to upload a new file with same name such a.jpg" , the system replace "a.jpg" .
we need to rename file when try to uploaded it.

Ravikumar said...

If i want to upload multiple files then, How?

Apple said...

File uploaded control is not working in modern style and working with traditional style.I don't understand whats wrong.Even Traditional style is not working in IE 8. Is there any browser dependency?

Unknown said...

Really Good Jop :)) keep moving

Anonymous said...

if i want to upload multiple images at a time like gmail

Unknown said...

sir, how can i save multiple files in the databse using ajaxfileupload control

Anonymous said...

I am getting error file not getting uploaded not getting reason

Unknown said...

why,i cant press button "select file" when my mouse hover to text it can. could you tell me?

Anonymous said...

It is possible to dynamically give value to Fileupload control e.g as we give value to button text like BUtton1.Text="Add"

arun said...

good keep going

Anonymous said...

Hi Suresh,

How can i upload get upload file using jquery ajax call in to webservice(.svc).How can i get uploaded file into webservice?

abhilashblog said...

Hello sir, I want to do this by progress bar.

Anonymous said...

How can I limit the size of the file upload say it max file size 10MB ?? Do we have an option to do this or we have to do it via javascripting ??

thanks in advance

Anonymous said...

how to place image at the side of ajax control during upload.....Can u plz help me out...

Unknown said...

hi suresh
i am getting error message like "File upload Failed."
when uploading file
please help.

Anonymous said...

Thank you Suresh !!

Anonymous said...

amazing site....thanx!!!!!!!

Shubhadeep C. said...

How to can I display the saved image immediate after upload from the client side code? As per my knowledge we are not getting the saved file image path in client side. Please help.

Unknown said...

can i get the total file size(all the files uploaded)

Unknown said...

Sir, i want to display progress bar like 1%, 2%, .....100% upload completed bar, instead of an image.

Give your Valuable Comments

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

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