Building a Gmail Style File Uploading System using ASP.NET 2.0
page 1 of 7
Published: 02 Oct 2007
Abstract
This article examines how to upload files to a web server using ASP.NET 2.0 with a different approach. With a click of a hyperlink you can show the "Choose File" dialog box and immediately once the user clicks the OK button from the File Choose dialog box, a file can be uploaded to the server.
by Jesudas Chinnathampi (Das)
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 61787/ 69

Introduction

A normal file upload routine consists of a Textbox, browse button and a submit button. Users have to click on the browse button, choose the file that needs to be uploaded and then click the upload button for the actual transfer of file from the client pc to the server. Take a look at the GMail file attachment process in Internet Explorer. If you have paid close attention, the file upload process in GMail during attaching a file in an email has no browse button. All you see is a link called "Attach a file." When you click on the link, the "choose a file" dialog box will be shown. The moment you pick the file and click the button Open, the upload process begins.

The two main difference from the usual file upload and the GMail file attachment is that there is no browse button and the submit button. There are mainly three advantages here. First, the user is saving a "mouse click" (no click of submit button). Second, instead of the browse button and the text box, we have a nice hyperlink. This is a better user interface. And third, the upload happens (like a background file transfer) as soon the user clicks the Open button. You too can have this kind of behavior in your web pages. The only catch is that the technique mentioned in this article only works in Internet Explorer. Let us see how this can be done.


View Entire Article

User Comments

Title: asdasd   
Name: asdasd
Date: 2012-11-08 1:43:06 PM
Comment:
asdasdasd
Title: ..........   
Name: ...
Date: 2012-09-25 8:01:18 AM
Comment:
.....
Title: sds   
Name: asdasd
Date: 2012-08-31 4:17:52 AM
Comment:
asdasd
Title: aa   
Name: aa
Date: 2012-07-14 1:36:03 AM
Comment:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:32:25 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
Title: Building a Gmail Style File Uploading System using ASP.NET 2.0   
Name: sanni
Date: 2010-03-23 3:28:46 AM
Comment:
very nice article and it works well in IE but does not work in FireFox
Title: Firefox Code Not Working   
Name: Om Prakash
Date: 2010-02-03 1:27:57 AM
Comment:
Your code does not work in Firefox.
Title: Good concept   
Name: developer
Date: 2009-07-16 6:01:52 AM
Comment:
heloo..gud article but it's not working properly.giving javascript error frUpload is undefined..
Title: Interesting concept   
Name: Printoutlet Webmaster
Date: 2009-02-19 10:56:21 AM
Comment:
Thank you for the arcticle. It is yet another quirk mode for browsers. Looking forward to HTML5, which, hopefully will have greater control over DOM elements.
Title: Good Article   
Name: Suzongwei
Date: 2009-01-03 4:02:48 AM
Comment:
Good Article
Title: Good Article   
Name: Ramanan Kalirajan
Date: 2008-12-09 7:00:34 AM
Comment:
Your article is really great and helpful too. Is there any way to open the file browse dialog box via javascript. That would be very helpful for me.
Title: Solai's Comment   
Name: solairaja
Date: 2008-10-22 10:45:17 PM
Comment:
In the main.aspx the frame Id is "ifu" but its supposed to be "frUpload" kindly correct that one.

Apart from that this article is excellent.

Very useful i got a some good ideas in uploading file technique after seeing this..
Title: how to browse data from my server to an .net webform   
Name: disha
Date: 2008-10-20 2:16:35 AM
Comment:
your code is good.it can be more descriptive with a screen design and explaining the code.
Title: Excellent Article   
Name: deepak
Date: 2008-09-27 2:46:20 PM
Comment:
Its an excellent article but i would still like to know how to make the file upload work on firefox..
Title: Works on local system only   
Name: Anand
Date: 2008-08-11 6:27:38 AM
Comment:
The code is superb.But it does not work when the page is accessed from the server.Generates an error : file upload path c://wwwroot/inetpub/upload does not exist,for files more than 100kb size was uploaded.

Any solution...
Title: How Can I See The Attached Files in my web form   
Name: Siva
Date: 2008-08-07 1:06:14 AM
Comment:
Hello,

Actually You had done a good job .Every thing eorkd fine!.
But How do i see the attached files?
Title: Good work!   
Name: Jane
Date: 2008-06-25 12:11:04 PM
Comment:
This is what I am looking for without using AJAX. Your code works very nice except:
frUpload should be ifu in
ifUpload = frUpload.document.form1
Title: Superb Code   
Name: Chaitanya
Date: 2008-05-28 11:36:42 PM
Comment:
hi
Jesudas,
Your code helps me a lot Thankyou for this superb code.

Regsrds
Chaitanya
Title: An Ajax Uploader works in firefox   
Name: prasad
Date: 2008-04-21 12:01:57 PM
Comment:
http://ajaxuploader.com/
Title: document.form1.myFile.click(); issue   
Name: prasad
Date: 2008-04-14 1:44:16 AM
Comment:
document.form1.myFile.click(); is well in IE but not in firefox.
Title: DirectoryNotFoundException was unhandled by user code   
Name: sree
Date: 2008-01-10 6:59:35 AM
Comment:
i am facing the problem when i click on the text file....
Title: Loophole   
Name: Chris Wilson
Date: 2008-01-04 11:58:41 AM
Comment:
Clever, but isn't this just exploiting something that is a loophole at best or a bug at worst? It seems to me that the behavior without an iframe is exactly what it should be given the input tag spec, and that the fact that it "works" if you wrap it in an iframe is really just an oversight that happens to only appear in IE. It's useful, yes, but it seems to me that it's essentially a bug implementing the HTML spec.
Title: nice   
Name: dude
Date: 2008-01-04 7:52:05 AM
Comment:
doesnt work in firefox
Title: Nice article but...   
Name: Jerome Vernon
Date: 2008-01-03 12:18:30 PM
Comment:
Nice article but have you looked at SWFUpload (http://swfupload.org/search/node/asp.net). It’s a javascript/flash multi-file uploader that works incredibly well. It’s free, works in IE/firefox, and they have an asp.net 2.0 sample web app in C# that can be downloaded from there site and run immediately. I have spent several months searching and reviewing various methods for selecting multiple files (hold ctl-key for selecting multiple files) for faster/easier uploading. You can stream the uploaded files to the file-system or database. SWFUpload is the best and easiest I’ve discovered so far.
Title: Thanks   
Name: josephshi
Date: 2007-12-29 1:46:48 AM
Comment:
These days i am thinking to have a new version file upload, your article is right on time. thanks a lot
Title: Error !!!   
Name: vish
Date: 2007-12-24 2:24:29 PM
Comment:
Hi,
Thanks but it does not work in firefox....
Title: Nice   
Name: Dinesh
Date: 2007-12-24 8:02:51 AM
Comment:
Thanks and nice a useful article
Title: Doesnt Work in Firefox   
Name: BoneKrusher
Date: 2007-12-21 6:55:31 PM
Comment:
Doesnt Work in Firefox
Title: Doesn't work in Opera 9.24 either   
Name: grizz
Date: 2007-12-21 7:48:47 AM
Comment:
it doesn't work in opera 9.24 either. attach file does not open any new window just reloads and "please select a file"
Title: Doesn't work in FF 2   
Name: Jko
Date: 2007-12-21 5:12:22 AM
Comment:
Doesn't work in FF 2
Title: Nice but   
Name: Michael
Date: 2007-12-21 12:21:00 AM
Comment:
Nice.
But, it didn't work with Firefox 2.0.0.11
Title: Nice   
Name: Sab
Date: 2007-12-20 12:46:12 AM
Comment:
Nice... keep up the good work
Title: Fileupload AJAX   
Name: Subgurim
Date: 2007-12-19 1:21:39 PM
Comment:
Already exists an opensource project that does this (and much more things): the FileUpload AJAX.

It's on codeplex (http://www.codeplex.com/fileuploadajax)
Title: Access is denied   
Name: Gilli
Date: 2007-10-18 3:02:31 AM
Comment:
U used the same code.
But when uploading the text document iam getting the error as access is denied.
How to solve the problem.
Title: Great Job   
Name: Tom
Date: 2007-10-18 1:53:56 AM
Comment:
U did a good job.
Thank You for providing this article.
It helps us a lot.Provide some more applications like this.
Title: Awsome!   
Name: ckang777
Date: 2007-10-17 11:20:34 PM
Comment:
Thank you so much for putting this solution up. You are awsome!

frUpload should be ifu in :

ifUpload = frUpload.document.form1

Thank a bunch!
Title: 11   
Name: 11
Date: 2007-10-12 11:19:22 PM
Comment:
nice article thanks
Title: Cancel Button Issue   
Name: Babar Javaid
Date: 2007-10-03 11:02:01 PM
Comment:
Nice article but the submit button onClick event occurs if I click the cancel button instead of the Open button in the File Browse Dialog box.
Title: Re:FF   
Name: Das
Date: 2007-10-02 4:02:44 AM
Comment:
It is not about invoking the click event for a hyperlink. Firefox does not allow the file choose dialog box to be displayed unless the user clicks the browse button
Title: FF   
Name: TweeZz
Date: 2007-10-02 1:30:13 AM
Comment:
What exactly is the issue in FF? If it is invoking a click on an anchor, then this probably can be solved using this code:
HTMLElement.prototype.click = function()
{
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}

Product Spotlight
Product Spotlight 





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


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-04-19 10:08:10 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search