Building AJAX Enabled File Uploading System with Progress Bar Using ASP.NET 2.0
page 1 of 7
Published: 03 Oct 2007
Abstract
This 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.
by Jesudas Chinnathampi (Das)
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 57464/ 649

Introduction

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. 


View Entire Article

Article Feedback

Title:  
Name:  
Url: ( Optional )
Comment:  
Please add 3 and 3 and type the answer here:

User Comments

Title: Good!! It worked for me   
Name: Mukesh
Date: 11/24/2008 11:32:12 AM
Comment:
Hi! It worked for me..Thanks a lot..
Title: Problem with code   
Name: Preeti
Date: 10/14/2008 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: 9/16/2008 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: hi   
Name: bahador
Date: 9/11/2008 7:21:21 AM
Comment:
hi freid
thanks alot fot your article
Title: very nice   
Name: mehmet
Date: 9/10/2008 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: 8/6/2008 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: 8/5/2008 5:59:43 AM
Comment:
useful
Title: No Progress Bar   
Name: Nic
Date: 7/23/2008 8:12:42 AM
Comment:
There is no progress bar here so the title is even more misleading...
Title: Feedback   
Name: Meera
Date: 7/1/2008 2:41:11 AM
Comment:
Can this be done in a user control???
Title: hi   
Name: jeni
Date: 6/9/2008 4:10:17 AM
Comment:
its helpfull
Title: Good Code   
Name: Naresh
Date: 6/5/2008 9:49:13 PM
Comment:
Very clear saving me from lot of confusion...
Title: PostBackTrigger ???   
Name: AL
Date: 5/16/2008 7:11:44 AM
Comment:
What reason put this in UpdatePanel if you use PostBackTrigger? This is full PostBack!
Title: Good Code   
Name: Rahi
Date: 5/14/2008 4:56:31 PM
Comment:
Saved me a lot of time...
Title: Have to agree with the new guy   
Name: Blake Shadle
Date: 4/10/2008 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: 4/3/2008 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: cool   
Name: Sudhir T
Date: 3/10/2008 8:07:34 AM
Comment:
Nice post. Simple and beautiful
Title: great!!!!!!!!   
Name: sadhana singh
Date: 2/27/2008 9:58:15 PM
Comment:
very nice please keep on pasting more materials it helped me lot thx again!!!!!!!!!
Title: Postback is happening   
Name: Nagaraj
Date: 2/1/2008 5:41:17 AM
Comment:
Still postback is happening when we upload file.
Title: The title is misleading!!!   
Name: MCM
Date: 1/18/2008 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: Very Good Ariticle   
Name: Rahul Chauhan
Date: 1/7/2008 1:52:32 AM
Comment:
Plz keep on posting new tutorials on ajax.

Great Job
Title: Good   
Name: Rajak Shaik
Date: 12/14/2007 12:06:31 AM
Comment:
Very good article
Title: How to upload the media   
Name: Cristiano
Date: 12/12/2007 8:37:19 AM
Comment:
How to upload some media like mp3 songs and picture .jpeg
Title: Need attachment in Sharepoint Designer Form   
Name: Kuldeep Singh
Date: 12/10/2007 6:27:55 AM
Comment:
Would you please explain how can i use this code in my Sharepoint Designer custom form????
Title: .NET Programmer   
Name: Raj
Date: 12/3/2007 12:13:15 PM
Comment:
Awesome buddy, although simple it made my day today. Superb.
Title: Misleading Title   
Name: Haissam Abdul Malak
Date: 11/30/2007 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: 11/15/2007 8:00:39 AM
Comment:
Great article, thanks ;)
:) Although I'm using this for my current project:
http://www.aurigma.com/Products/ImageUploader/default.aspx
The 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: 11/14/2007 4:46:45 PM
Comment:
Even though you are using UpdatePanel. It is not actually AJAX, it is posting synchronously all the time.
Title: How to change postedFile?   
Name: nice
Date: 11/13/2007 8:33:45 PM
Comment:
How to change (in code) myFile.PostedFile in UploadFile() method? Changing it u can steal any file form client hard drive :-)
Title: good   
Name: iraj
Date: 11/13/2007 2:44:49 PM
Comment:
great
Title: URL   
Name: JasonJ
Date: 11/13/2007 11:56:48 AM
Comment:
Here is the link.

http://geekswithblogs.net/rashid/archive/2007/08/01/Create-An-Ajax-Style-File-Upload.aspx
Title: Cheating   
Name: JasonJ
Date: 11/13/2007 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: 11/13/2007 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: 10/8/2007 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 IE7 solved   
Name: lp
Date: 10/4/2007 10:46:25 AM
Comment:
Sorry for the 3rd comment ;-) but I've found solution for IE7 here http://west-wind.com/WebLog/posts/1227.aspx:

add this to JavaScript:
setTimeout('document.images["Progressbar"].src = "progressbar_green.gif"', 200);

and set ID of the image to "Progressbar".
Title: Not working with gif   
Name: lp
Date: 10/4/2007 10:01:27 AM
Comment:
In FF it's working, IE7 and Opera not :-(
Title: Not working with gif   
Name: lp
Date: 10/4/2007 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: 10/3/2007 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: 10/3/2007 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?
Title: Rc   
Name: rahul
Date: 10/3/2007 2:33:35 AM
Comment:
good, but not explored ajax much






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2009 ASPAlliance.com  |  Page Processed at 1/7/2009 12:43:09 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search