Building AJAX Enabled File Uploading System with Progress Bar Using ASP.NET 2.0

page1 of 7

Published:03 Oct 2007

AbstractThis article examines how to upload a file to a remote web server using ASP.NET 2.0 and AJAX. The author also discusses how to display a "Please wait ..." message while the upload is happening.

Uploading files using ASP.NET Framework 1.0 / 2.0 / 3.0 is
pretty easy. Without much error handling, all we need is a couple of lines of code
to upload a file to the web server. Read my article
which explains how to upload files using ASP.NET which was written four years
back. AJAX is playing a greater role these days in every webpage that pops up.
Uploading files using ASP.NET AJAX is not a straight forward one. Those who do
know about AJAX, it is used to update some portions/sections of a web page
without affecting other sections. In other words, if you do want to refresh
your web page on a button click but you still want to update the content of
your web page, then you should use AJAX.

In this article we will see how to upload files using ASP.NET
and AJAX. We will also see how we can display a message, "Please wait …
Upload in progress," during an upload is taking place. Displaying a "Wait
message" always helps the user to know what is really going on; otherwise,
users will have to wait and will not be sure what is going on until the upload
is done.

Title:
Excellent Article - works perfectly
Name:
Tausif
Date:
2012-11-27 11:10:03 PM
Comment: I viewed many sites explaining this but none of those worked. They didnt explain about the javascript code which you have mentioned.You also took time to explain in detail what every step does. Excellent work!THanks,Tausif

Title:
It is working wonderfully
Name:
yashaswi
Date:
2012-08-10 4:32:42 AM
Comment: The concept was working fine .......

Title:
vvvvv
Name:
vvvv
Date:
2012-08-06 8:50:05 AM
Comment: vvv

Title:
v
Name:
v
Date:
2012-08-06 8:49:41 AM
Comment: v

Title:
sfs
Name:
fsd
Date:
2012-07-25 11:40:12 AM
Comment: v

Title:
sad
Name:
asds
Date:
2012-05-28 3:19:15 AM
Comment: sdsa

Title:
aa
Name:
aa
Date:
2012-05-19 9:02:29 AM
Comment: dasda

Title:
test
Name:
test
Date:
2012-05-09 12:33:44 AM
Comment: test

Title:
need for more help
Name:
Mann
Date:
2011-10-06 8:24:10 AM
Comment: I am using ajax enable form and also using some ajax control on the form.still i am unable to upload the file.Can any one have a solution

Title:
Delete button
Name:
Maha hamad
Date:
2011-05-22 8:47:54 AM
Comment: how i can add Delete button next to the file name that has been updated so the user can delete it

Title:
Thank you sooo much
Name:
itsi bitsi
Date:
2011-03-16 3:58:21 PM
Comment: Thank you so much. I had been trying to achieve this for 3 days straight. Now I just need upload progress

Title:
Thanx for post but its not work
Name:
sebi verma
Date:
2011-02-04 7:25:11 AM
Comment: i have applied teh same code and when i am running the page is will some javascript error when i clicked on upload button.

Title:
GOOD BUT NOT AJAX
Name:
XIRO
Date:
2010-07-01 12:32:17 PM
Comment: Well done brother! What you have done is a solution for the problem of many but I think it is not AJAX.

AsynchronousJavascript AndXML

Why? because of your javascript code, you use it only to show the user about the progress of the upload but not to send file to the server. Also, you've missed one important thing that AJAX is known for, the XMLHttpRequest object.

Hey! don't be offended, Article Feedback is here to help you improve yourself, right?

Title:
No Luck
Name:
Prajakta
Date:
2010-05-07 8:14:56 AM
Comment: I have tried ur same code in test app. and believ not working at all getting error 'Sys is undefined'

Title:
Not AJAX!
Name:
Mr B.
Date:
2010-03-03 3:28:28 PM
Comment: Worthless as this causes a full page postback.I wish the comments would come before the article...

Title:
Majow flaw with above code
Name:
Michael Freeman
Date:
2010-01-07 8:37:51 AM
Comment: I have sucessfully implemented the above code, and all seemed ok, until I realized that it's not AJAX!. Specifillay the code alls a full postback of the page. Ultimately that would not be an issue, but I noticed that other controls on the same parent form lost their contents during this postback, such as all textboxes lost their changes. Upon return from upload (when upload completed) the textboxes contents returned to original, probably due to the fact that the postback triggers Page_load etc events...

Title:
Thanks
Name:
Mr. T
Date:
2009-12-22 9:15:07 AM
Comment: Brilliant... a very good solution to a very irritating problem. No swf's. No php. Well done.

Title:
Serious?
Name:
LAME
Date:
2009-09-02 12:45:12 AM
Comment: This is the farthest thing from an async postback. Does the author even know what the heck an async postback is???

Title:
Superb..
Name:
Viji
Date:
2009-08-27 12:38:54 PM
Comment: superb...I was breaking my head to do this..Happy to see this post..Lemme try this tom... :)

Title:
Hmmm
Name:
VIkas
Date:
2009-08-18 3:23:06 PM
Comment: So dude, how does it uploads files using Ajax? The upload still causes a full postback. Change the article title..

Title:
Good Tutorial
Name:
Chandradev
Date:
2009-08-05 8:18:09 AM
Comment: HiThis is very nice tutorial. But while implementing in master page. It is giving so error. And while keeping .gif image inside progress template. It is not rotating. What is the problem ?

Title:
Thank You Thank You
Name:
Chris
Date:
2009-06-19 12:41:10 PM
Comment: Thank you for the article. I'm a novice and have been researching this on and off for a week. Everything I found was way overcomplicated for what I need. This is perfect.

Title:
Greate Programming
Name:
amit Kumar Jha
Date:
2009-06-05 7:04:11 AM
Comment: I would like to thank a lots to develop such great program in simple way. Really it helped me. I found all thing relted FileUploading in this development.

Title:
masterPage-not working
Name:
Tom
Date:
2009-05-06 5:25:20 AM
Comment: Hi,good article!!!But did someone find a way to working with Master Page?

Title:
count show
Name:
sushil
Date:
2009-04-20 9:06:15 AM
Comment: Good article!!! I wonder how can the count can be incremented in progress bar?Say for example I am uploading an exel file having 100 data, I want to show the count in progress bar like "x data uploaded". Here x will vary from 1 to 100. Thanks!

Title:
Can't upload to hosted server
Name:
Larry
Date:
2009-03-29 6:38:22 PM
Comment: I can't understand how this could work since it just saves the file to the server. If you're on a hosted server then there's no way you can load a file to it. What I want is to be able to save the file in the database on the server. However, all attempts have failed with a "Request for the permission of type 'System.Security.Permissions.FileIOPermission" error.

By the way, you can't do a file upload without a full postback according to the literature out there, so that's not why you use the updatepanel. You use it for other aspects of the file upload process.

Title:
Display message does not show
Name:
joar
Date:
2009-03-11 5:04:45 AM
Comment: I was happy to see your solution, but as often happens, solutions doesn't always function....for me

Title:
Not working
Name:
mab
Date:
2009-02-27 9:26:28 AM
Comment: hi... this is good job! but this code not working with master page!!!

Title:
Hmmm
Name:
Danieö
Date:
2009-01-13 9:36:05 AM
Comment: What's the the purpose of using an updatepanel here? You're still doing a full postpack, so why not use a div to show/hide the label?

Title:
Good!! It worked for me
Name:
Mukesh
Date:
2008-11-24 11:32:12 AM
Comment: Hi! It worked for me..Thanks a lot..

Title:
Problem with code
Name:
Preeti
Date:
2008-10-14 2:07:34 AM
Comment: this code is good but it doesn't work for large size files

Title:
Building AJAX Enabled File Uploading System with Progress Bar Using ASP.NET 2.0
Name:
deva
Date:
2008-09-16 10:24:33 AM
Comment: update progress is not working and first time not upload to server, second time we upload any file, then only upload that file.This code not working in VS2005.

Title:
very nice
Name:
mehmet
Date:
2008-09-10 4:54:18 AM
Comment: very very thanks...very good work

Title:
Building AJAX Enabled File Uploading System with Progress Bar Using ASP.NET 2.0
Name:
Neeraj k Shrivastwa
Date:
2008-08-06 6:34:51 AM
Comment: The FileUpload Server Control does not work within the UpdatePanel. Within the updatepanel the HasFile property of FileUpload control always comes false.

Title:
Super
Name:
MMK
Date:
2008-08-05 5:59:43 AM
Comment: useful

Title:
No Progress Bar
Name:
Nic
Date:
2008-07-23 8:12:42 AM
Comment: There is no progress bar here so the title is even more misleading...

Title:
Have to agree with the new guy
Name:
Blake Shadle
Date:
2008-04-10 9:18:53 AM
Comment: I'm going to have to agree with the new guy on this one. Not exactly the "AJAX" experience that I'm sure everyone hoped for.

Title:
error when in UserControl
Name:
Exshakto
Date:
2008-04-03 6:03:27 AM
Comment: Im trying to put this in a asp.net User Control, and im getting an error in the javascript. Where do you think I should put the javascript when its in a user control?

Title:
The title is misleading!!!
Name:
MCM
Date:
2008-01-18 3:10:43 PM
Comment: This is NOT AJAX. It just doing a full post back. If it's just post back without utilizing any AJAX...why would you need to put it into an update panel?

Title:
Misleading Title
Name:
Haissam Abdul Malak
Date:
2007-11-30 2:11:36 AM
Comment: The article is explained in a good way, however the content is not related to the title!!

Title:
hail to the n00bz
Name:
Michael
Date:
2007-11-15 8:00:39 AM
Comment: Great article, thanks ;):) Although I'm using this for my current project: http://www.aurigma.com/Products/ImageUploader/default.aspxThe price is pretty steep though but it has yummy resize and thumbnailing along with other stuff that I don't need :)

Title:
one more developer
Name:
Dotnet Coder
Date:
2007-11-14 4:46:45 PM
Comment: Even though you are using UpdatePanel. It is not actually AJAX, it is posting synchronously all the time.

Title:
Cheating
Name:
JasonJ
Date:
2007-11-13 11:55:45 AM
Comment: This method simply fakes an ajax postback and which might look cool but defeats the whole purpose of the ajax postback. Anyway, here is a link to a page that does it correctly, using an IFrame as Microsoft does in Hotmail.

Title:
FileUpload AJAX
Name:
Subgurim
Date:
2007-11-13 5:32:20 AM
Comment: Great, but take a look at the FileUpload AJAX control for ASP.NET hosted on codeplex (http://www.codeplex.com/fileuploadajax)

Title:
Update Panel not working in side from view
Name:
QuocThinh
Date:
2007-10-08 2:58:54 AM
Comment: Hi all, I just try your method, but I have a form view all the field will be save to the database, among that, I have fileUrl file that contains the uploads filename, so I must put this upload file inside the form view. But it not working both update panel and update progress, I don't know why.

Title:
Not working with gif
Name:
lp
Date:
2007-10-04 9:47:28 AM
Comment: Thx for the article.

But I got a problem. Text (Label) is working OK but using gif e.g. from http://mentalized.net/activity-indicators/ doesn't work - it shows only a white place. Any idea?

Title:
This is NOT a AJAX based File Upload Method
Name:
Adam Nemitoff
Date:
2007-10-03 10:32:54 AM
Comment: The method documented here does a full post-back and therefore the title of this article is misleading!

Title:
why?
Name:
Mikal Schacht Jensen
Date:
2007-10-03 3:46:46 AM
Comment: I've been attempting to upload files using ASP.NET ajax, and although I haven't spent much time exploring it, I always ended up having to do a full postback to actually be able to retrieve the file serverside. So when I first saw this article linked somewhere, I immediatly clicked over here.

I'm still a fairly inexperienced programmer with less than a year's paid programming under my belt. But having read it now, I fail to see the point of it all. Doesn't adding the button to a postbacktrigger make it cause a full postback, and thus defeat the entire purpose of using Ajax?