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):
69702/
527
|
|
|
|
| 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.
|
| More about INPUT HTML Control |
<input type=file> when rendered to the browser will
result in a browse button and a textbox which holds the selected file. Allow me
to explain some of the facts that we should know about the <input
type=file> HTML control. First of all, the value property of this control is
READ ONLY. Due to browser security threats, we cannot assign a value (File
Location in the local PC) to this control using any code. The only way that we
can assign a value is by clicking the browse button and selecting the file.
Another important aspect about this control is that we
cannot invoke/fire the click event for this control. For example, the following
code will result in a JavaScript error "Access Denied."
Listing 1
<html>
<head>
<title>File Upload</title>
<script language="javascript" type="text/javascript">
function Browse()
{
document.form1.myFile.click();
document.form1.submit();
}
</script>
</head>
<body onload="javascript:Browse();">
<form id="form1" runat="server">
<input type="file" runat="server" name="myFile" id="myFile">
</form>
</body>
</html>In the above code I was trying to invoke the click event
during the page load. When you run the above code, when the page loads you will
get the "Choose File" dialog box. But the moment you click the
"Open" button from the dialogbox, the page will generate a client side
JavaScript error: - "Access is Denied." The exact statement that
caused the error is document.form1.submit();.
If GMail can do this, we too can do this. After pondering
much and reading many articles on the net, I finally found how to upload files
using no browse button. We need to have two pages to perform this kind of
upload; one file within an IFRAME tag and another main file.
|
| Using the IFRAME HTML tag |
As I have mentioned earlier, we need two ASPX pages to
implement this technique. The main ASPX page will have the following:
1) A Hyperlink
2) <IFRAME> HTML tag- Source for this IFRAME will be
Upload.aspx
And in the Upload.aspx page, we need to have the following:
1) Input type=file HTML control (Visibility should be
hidden)
2) Submit button (Again, Visibility should be hidden)
When the user clicks on the hyperlink from the main.aspx, we
have to show the File Choose dialog box. This can be done by invoking the
onclick event for the <input type=file> control which resides in the
Upload.aspx. In order to submit the form, we have to fire up the onclick event
for the Submit button which is located in the Upload.aspx. This time we will
not get any client side JavaScript error. Strange you might think; the same
code fails when there is no <IFRAME> involved and the same code works when
an <IFRAME> is involved. Confusing …. but it works like a charm!
Here is the complete code for Main.aspx.
Listing 2
<html>
<head>
<script type="text/javascript" language="javascript">
function Browse()
{
var ifUpload;
var confirmUpload;
ifUpload = frUpload.document.form1;
ifUpload.myFile.click();
ifUpload.btnSubmit.click();
}
</script>
<title>File Upload</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" OnClick="javascript:Browse();">Attach Files</a>
<iframe src="Upload.aspx" frameborder="0" id="ifu" name="ifu"></iframe> </div>
</form>
</body>
</html>Complete code for Upload.aspx is below.
Listing 3
<%@ Page Language="C#"%>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Files.Count == 1)
{
myFile.PostedFile.SaveAs(Server.MapPath(".") +
"\\upload\\myUploadFile.txt");
}
}
</script>
<html>
<head runat="server">
<script type="text/javascript">
function SubmitForm()
{
// Simply, submit the form
document.form1.submit ();
}
</script>
<title>Upload</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" runat="server" id="myFile" name="myFile"
style="visibility:hidden;" />
<input type="button" runat="server" id="btnSubmit" name="btnSubmit"
onclick="javascript:SubmitForm();" style="visibility:hidden;" />
<br /><asp:Label ID="lblMsg" runat="server" ForeColor="red"
Font-Size="Medium" Font-Bold="true"></asp:Label>
</div>
</form>
</body>
</html>If you carefully go through the code listing for
Upload.aspx, you will find that the visibility property of Input type=file control
and the submit button control is set to “Hidden.” If we set the visibility of
these control to visible, then we will see the browse button and the submit
button in the Internet Explorer (Browser). We really need these two controls to
upload any file to a Server from a Client PC.
|
| How it works? |
As you can see from the above code listing (Main.aspx), we
have a hyperlink with a text of “Attach files.” The OnClick event for this
hyperlink invokes a client side function, “Browse.” Within this browse function
we are invoking the OnClick event for the <Input type=file> control
(which resides in the Upload.aspx). Once this event is fired, the user will see
the File Choose dialog box. After a file has been selected, the control will
come back to the Browse function. The next statement that will be fired up will
be ifUpload.btnSubmit.click(); this click event will end up executing the
statements inside the SubmitForm function from Upload.aspx. Once the form is
submitted, you can use server side code to upload the file. Detailed coding for
the Upload.aspx can be downloaded at the end of this article.
Since this technique will only work in the IE browser, you
should make sure that the client’s browser is indeed Internet Explorer. I
tested this in a Firefox browser and it did not work for sure.
|
| Live Demo |
Click the following link to upload any file to the web
server. For security reasons, only text files will be allowed to upload. Please
do not upload any sensitive information to the server, since I am providing a
hyperlink to download the file so that you can really verify that the upload
happened correctly.
Upload
File
Click
here to download the file that you just uploaded
|
| Downloads |
|
| Summary |
Well, I hope you enjoyed the article. This technique can be
used to implement the file upload process in any web site. Since this method
only works with IE, it might be best suited for an Intranet Application. This
can also be used in any website, provided you use this code only when the
client’s browser is Internet Explorer.
|
|
|
|
|
Article Feedback
User Comments
Title:
qqq
Name:
www
Date:
11/20/2009 9:08:50 AM
Comment:
wqwqwqw
|
Title:
Good concept
Name:
developer
Date:
7/16/2009 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:
2/19/2009 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:
1/3/2009 4:02:48 AM
Comment:
Good Article
|
Title:
Good Article
Name:
Ramanan Kalirajan
Date:
12/9/2008 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:
10/22/2008 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:
10/20/2008 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:
9/27/2008 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:
8/11/2008 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:
8/7/2008 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:
6/25/2008 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:
5/28/2008 11:36:42 PM
Comment:
hi
Jesudas,
Your code helps me a lot Thankyou for this superb code.
Regsrds
Chaitanya
|
Title:
sdf
Name:
iuh
Date:
5/1/2008 11:03:23 AM
Comment:
iuh
|
Title:
An Ajax Uploader works in firefox
Name:
prasad
Date:
4/21/2008 12:01:57 PM
Comment:
http://ajaxuploader.com/
|
Title:
gfhf
Name:
fghfg
Date:
4/18/2008 11:22:42 AM
Comment:
fghf
|
Title:
document.form1.myFile.click(); issue
Name:
prasad
Date:
4/14/2008 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:
1/10/2008 6:59:35 AM
Comment:
i am facing the problem when i click on the text file....
|
Title:
Loophole
Name:
Chris Wilson
Date:
1/4/2008 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:
1/4/2008 7:52:05 AM
Comment:
doesnt work in firefox
|
Title:
Nice article but...
Name:
Jerome Vernon
Date:
1/3/2008 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:
12/29/2007 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:
12/24/2007 2:24:29 PM
Comment:
Hi,
Thanks but it does not work in firefox....
|
Title:
Nice
Name:
Dinesh
Date:
12/24/2007 8:02:51 AM
Comment:
Thanks and nice a useful article
|
Title:
Doesnt Work in Firefox
Name:
BoneKrusher
Date:
12/21/2007 6:55:31 PM
Comment:
Doesnt Work in Firefox
|
Title:
Doesn't work in Opera 9.24 either
Name:
grizz
Date:
12/21/2007 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:
12/21/2007 5:12:22 AM
Comment:
Doesn't work in FF 2
|
Title:
Nice but
Name:
Michael
Date:
12/21/2007 12:21:00 AM
Comment:
Nice.
But, it didn't work with Firefox 2.0.0.11
|
Title:
Nice
Name:
Sab
Date:
12/20/2007 12:46:12 AM
Comment:
Nice... keep up the good work
|
Title:
Fileupload AJAX
Name:
Subgurim
Date:
12/19/2007 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:
10/18/2007 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:
10/18/2007 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:
10/17/2007 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:
10/12/2007 11:19:22 PM
Comment:
nice article thanks
|
Title:
Cancel Button Issue
Name:
Babar Javaid
Date:
10/3/2007 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:
10/2/2007 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:
10/2/2007 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
|
|
|
