Peter's Gekko

Sponsors

The Lounge

Wicked Cool Jobs

News

Advertisement

Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
The proper way to open a file dialog from your webpage

Yesterday I blogged on the way to start a fileopen dialog from a web-page. Thanks to the feedback we discovered there's a very bad turn to that solution, the ActiveX control used only works on a machine which has MS devtools installed. Which is your or my machine but not that of the customer who is going to use the application. On the web I found a new solution which is pretty neat and doesn't need any ActiveX at all.

In HTML there's the INPUT control of type file. It is an input box which automatically gets a button. Clicking this button will start the desired file-open dialog, completing that copies the filename into the textbox. Using the example found on the web I have crafted the following solution.

  • Create a hidden input file control
  • Create a script function which fires the click of the file-input control and copies the selected value into an asp.net textbox
  • Add an onclick handler to a button to fire this script function.

This is the script snippet on the page

<SCRIPT language=JavaScript> function BrowseClick(){
document.forms[0]['fileBrowse'].click();
document.forms[0]['TextBox1'].value = document.forms[0]['fileBrowse'].value;
return false;}
</SCRIPT>

Which is a stripped version of the example found. Again I assemble the script from code

const string fiName = "fileBrowse";
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<div style='visibility: hidden; width: 0px; height: 0px'>");
sb.Append(string.Format("<input type=file id='{0}'></div>", fiName));
sb.Append("<Script language=JavaScript> function BrowseClick(){");
sb.Append(String.Format("document.forms[0]['{0}'].click();", fiName));
sb.Append(String.Format("document.forms[0]['{0}'].value = document.forms[0]['{1}'].value;", TextBox1.ClientID, fiName));
sb.Append("return false;} </Script>");
 

RegisterClientScriptBlock(scriptKey, sb.ToString());

ButtonLinkNaarDocumentatie.Attributes.Add("OnClick", "return BrowseClick();");

This also works on my wife's XP-home machine. Thanks a lot to Andrew, Micheal Harris and Botolph.

blog on,

Peter


Posted Wed, Dec 3 2003 5:54 PM by pvanooijen

[Advertisement]

Comments

Peter van Ooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, Dec 4 2003 3:52 AM
This post cannot be edited in the .TEXT admin, there is a :

<div style='visibility: hidden; width: 0px; height: 0px'>
<input type=file id='fileBrowse'></div>

before the script snippet. Maybe it will stay there in the comment.

IE eats the div and the .text editor actiually does show an input button.
Makes you quite desperate.
Chris Cochran wrote re: The proper way to open a file dialog from your webpage
on Tue, Jan 27 2004 8:17 PM
Good work!

Been trying to find a solution for that particular problem. Thanks for sharing it.
HP wrote re: The proper way to open a file dialog from your webpage
on Mon, Aug 9 2004 8:51 AM
Thanks a lot!
sk wrote re: The proper way to open a file dialog from your webpage
on Sat, Oct 30 2004 2:40 AM
excellent work done
thanks for the help that u have extended to the developers
sk wrote re: The proper way to open a file dialog from your webpage
on Sat, Oct 30 2004 2:51 AM
how to add filters to the file open dialog box?
sk wrote re: The proper way to open a file dialog from your webpage
on Sat, Oct 30 2004 2:52 AM
how to add type filters to the open dialog box?
Peter van Ooijen wrote re: The proper way to open a file dialog from your webpage
on Tue, Nov 2 2004 3:03 AM
Copied this from the w3c site.

File Attachments (type=file)

This allows users to attach one or more files to be submitted with the form's contents. The ACCEPT attribute can be used to specify a comma separated list of MIME content types. These are used to restrict the kinds of files that can be attached to the form. For instance:

<input name=pictures type=file accept="image/*">

This example restricts files to match "image/*", i.e. to registered MIME image types. For windows based user agents, it is suggested that file fields display the name of the last file attached, with the ability to open a file dialog box to view the complete list of files attached so far. The accept attribute then acts to specify the filter on the list of candidate files.

Does that help ?
Martin wrote re: The proper way to open a file dialog from your webpage
on Wed, Nov 3 2004 6:45 PM
Thanks, that's great. Is there a way to make it open a Save dialog?
Peter van Ooijen wrote re: The proper way to open a file dialog from your webpage
on Mon, Nov 8 2004 1:29 AM
I'm not sure what you are looking for. Isn't that the standard dwonload/save as dialog ? Or do you want to set the filename under which the file wil be saved on the server ? Will make the dialog complicated, a local and a remote filename.
Nick wrote re: The proper way to open a file dialog from your webpage
on Wed, Nov 10 2004 1:13 PM
Is it possible to put a defaut filter for file type, like *.txt
Peter van Ooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, Nov 11 2004 2:17 AM
You mean add a filter to the dialog box itself ? Afaik that's beyond the possibilities ... It's not part of the specs.
vinay wrote re: The proper way to open a file dialog from your webpage
on Thu, Dec 2 2004 3:17 AM
where did u learn javascript from?
anil wrote re: The proper way to open a file dialog from your webpage
on Thu, Dec 2 2004 3:19 AM
hey, stupid and idiotic code.peter first learn properly and then start giving sample code to others
Peter van Ooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, Dec 2 2004 3:56 AM
hey mr. anonymous : would you be so kind to say _what you consider_ wrong ? imho there's nothing wrong with the sample.


swathi wrote re: The proper way to write output to New Window
on Fri, Jan 21 2005 11:35 PM
please send th answer for the requested
Peter van Ooijen wrote re: The proper way to open a file dialog from your webpage
on Sat, Jan 22 2005 3:43 AM
What is the question?
jdw wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 28 2005 3:44 PM
Not sure what anonymous is talking about. It works great. Thanks!!!
Daniel Goodhew wrote re: The proper way to open a file dialog from your webpage
on Mon, Sep 19 2005 3:52 AM
Peter excellent mate. Oi anonymous get your head out of your ***.
Been Googling for Comdlg examples but they are all as i thought... more problems than the problems that they fix.
Thanks for the neat trick
aroon wrote re: The proper way to open a file dialog from your webpage
on Thu, Mar 2 2006 12:45 PM
I'm trying to implement this in my ASP.NET form and its not working. What I am experiencing is that in the BrowseClick function the click() function fires but doesnt block the javascript execution so the rest of the function completes before any value for the fileBrowse element is even set...

is there an onValueChange event or something like that for the <input type=file> element? I'm searching for one now...
aroon wrote re: The proper way to open a file dialog from your webpage
on Thu, Mar 2 2006 12:56 PM
i figured it out! instead of binding your javascript function to the onClick event, bind it to the onpropertychange event. in your javascript function all you need to do is copy the value from the file input element to your asp element and you're done. no need to launch the click() function.
wally75 wrote re: The proper way to open a file dialog from your webpage
on Thu, Apr 6 2006 10:10 AM
Hi to All,
I tried to do this, but I've a trouble...
Only for test pourpose, I left file control visible, so I've seen that if I click on my new Browse button, after common dialog appears and both textboxes are filled with filename, when I click Send button, file control reset itself (but filename still remain in my new textbox), and ONLY the 2nd click will be handled by code behind (with several errors due to the reset of file control). If I click to the browse button of the file control, instead, it works fine! Why???
Thanks all!
pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Fri, Apr 7 2006 2:53 AM
The opendialog is handeled on the client. The code behind is executed on the server and will not happen before the browser posts back to the server. With the post-data of the secend click.
sk wrote re: The proper way to open a file dialog from your webpage
on Tue, Apr 25 2006 10:26 AM
Good Idea!!!Thanks a lot!It saved me to re-invent the wheel!!!
Peter Chen wrote re: The proper way to open a file dialog from your webpage
on Wed, Apr 26 2006 8:22 PM
Great work! Thank you for sharing it. This is actually what I am looking for.
mitch wrote re: The proper way to open a file dialog from your webpage
on Mon, May 15 2006 3:27 PM
I know the answer is probably "no" but I have to ask: Is there anything like this for a Save As ... dialog?
pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, May 18 2006 3:53 AM
Mitch, it's not in the w3c specs... Perhaps with some fiddliing ? The main problem is to make it accept the name of a non-existing file.

bozo wrote re: The proper way to open a file dialog from your webpage
on Wed, Jun 14 2006 7:29 AM
@mitch:
in the code example, instead of "cdl.showopen;" you should write "cdl.showsave;"

One more tip if you experience difficulties creating the object "MSComDlg.CommonDialog":just register "ComDlg32.ocx" using following line (use path if neccessary!):
regsvr32 comdlg32.ocx

hope it will work for all of you, too.
pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, Jun 15 2006 4:12 PM
eh bozo, this post is about creating a dialog _without_ using a (com wrapper around) common dialog, but using an html input control instead. The com one was the bad idea, because most user don't have this installed. Even if they could their hands on it they often don't have the necessary rights to register the control.
Moua Golmiri wrote re: The proper way to open a file dialog from your webpage
on Sun, Jul 23 2006 4:29 PM
ii isnt good enough
Master wrote re: The proper way to open a file dialog from your webpage
on Wed, Sep 27 2006 1:27 AM

by using this code, i can get the file path eg "c:\xxx\text.txt", it works fine if i am using my local site. But when i access server site then at that time it try to read from the same path from the server ie "c:\xxx\text.txt", but file is not on the sever, it is on my local pc. so how to upload file from local pc to the sever using this???

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, Sep 28 2006 3:07 AM

The dialog looks for a file on the machine your browser is running on. You cannot access the filesystem on the server. Or am I misunderstanding you ?

wozza wrote re: The proper way to open a file dialog from your webpage
on Wed, Jun 20 2007 1:20 AM

this is great. I just want to get a file name from the user, the file name will be stored in the database. I don't the actual file uploaded. this does the job, after I followed plenty of red herrings.

mitch: if you want save as, try

document.execCommand("saveAs")

apondu wrote re: The proper way to open a file dialog from your webpage
on Sun, Sep 16 2007 3:17 PM

Hi,

Nice article, but i feel it does not work in Mozilla or any other browsers other than Internet Explorer, can anyone let me know the reason and how to solve this or am i missing something, it would be great if someone responds back with a suggestion or  answer

My mail-id is apondu@gmail.com

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Tue, Sep 25 2007 4:02 PM

It should work in every browser as it is standard html. :?

Thiruvengadam wrote re: The proper way to open a file dialog from your webpage
on Wed, Oct 17 2007 2:37 AM

document.forms[0]['fileBrowse'].click();

This code is working in IE but not in Mozilla Firefox.

that dude from high school wrote re: The proper way to open a file dialog from your webpage
on Sun, Nov 18 2007 12:31 AM

I think I'm just going to use a custom (I beleive the term is submodal) dialog for my text editing webapp. Nice tut, though ;) . My only problem would be to retrieve the directories.

I know this is a bit off-topic, but does anyone have any ideas?

Windows Vista Blog wrote re: The proper way to open a file dialog from your webpage
on Wed, Apr 23 2008 5:01 AM

Thank you very much man...

Bernie wrote re: The proper way to open a file dialog from your webpage
on Wed, Jun 25 2008 6:18 PM

I am attempting to implement something like JavaScript that is described here.  My goal is to popup the File Selection dialog without the end-user having to first click the Browse button, and then to bring the contents of the user-selected file back to the web server.  However, when the associated form gets submitted, an “Access is denied” error always results.  I am using Internet Explorer 6 and suspect that I am encountering some sort of security issue with respect to the behavior of JavaScript's file-type input control.  I would appreciate any thoughts or suggestions on this.

I also have a couple of questions about the JavaScript in your implementation of the BrowseClick() function.  What is the purpose of assigning the value of the fileBrowse file-type input to TextBox1?  Also, why is it necessary that the BrowseClick() function return false?

Thanks,

Bernie

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Mon, Jun 30 2008 11:23 AM

I'm blank on the security issue.

The filename is assign to a text box to have it available for an edit-by-hand.

The script returns false to prevent a postback.

Bernie wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 3 2008 2:49 AM

Hi Peter,

Thanks for your reply.

If the purpose of having 'TextBox1' on the page is to be able to edit the full-path file name by hand, then why do you have the div around 'fileBrowse' (the file-type input).  That div hides 'fileBrowse' and its edit box?  I must be misunderstanding something you are trying to do here.  Couldn't you have instead simply eliminated 'TextBox1' entirely and shown 'fileBrowse'?  Wouldn't that have provided the end-user with precisely the same functionality?

Bernie

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 3 2008 4:50 AM

ehh, perhaps.. Have to dive back into that specific project to find out...

You're free to try what works for yourself

Bernie wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 3 2008 9:18 AM

It would be great if you could take a deeper look at this.

Here is a sample of the JavaScript that I am working with that has been modified to use your web server for its submit:

<html>

<head>

<script type = 'text/javascript'>

function selectFile()

{

   document.forms[0]['#ICOrigFileName'].click();

}

function submitAction_win0(form, name)

{

form.ICAction.value=name;

form.submit();

}

</script>

</head>

<body onload="selectFile()">

<form name='win0' method='post' action="http://codebetter.com/"  autocomplete='off' enctype='multipart/form-data'>

<input type='hidden' name='ICAction' value='None' />

<input type='file' name='#ICOrigFileName' size='50' />

<input type='button' class='PSPUSHBUTTON' value='Upload' name='Upload' onclick="submitAction_win0(this.form,'#ICOK');" PSaccesskey='\' />

<input type='button' class='PSPUSHBUTTON' value='Cancel' onclick="submitAction_win0(this.form,'#ICCancel');" />

</form>

</body>

</html>

If you run this code (double-click on a file containing it in Windows Explorer) with IE6 and JavaScript debugging turned on, it will automatically prompt you for a file to upload.  But if you then select a file and manually click the Upload button on the page, you will get an "Access is denied" error message.

However, if you simply remove the onload statement (and the function call it specifies), then run the resulting code, you will need to manually click the Browse button to select a file (which is expected), but then manually clicking the Upload button works fine (it does the submit, takes you to the corresponding website, and produces no error message).

Bernie

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 3 2008 11:10 AM

Bernie, that's beyond my scope at this moment. Tomorrow morning I'm leaving for a holiday.

Perhaps someone else over here ?

Calvin wrote re: The proper way to open a file dialog from your webpage
on Wed, Jul 9 2008 1:08 PM

This does not work in firefox..any work around/alternative?

Galina Toms wrote re: The proper way to open a file dialog from your webpage
on Wed, Jul 9 2008 7:04 PM

Please look at <br /> www.ardentedge.com/pr_WidgetBuilder_FileDialog.htm <br />.

You can find solution for all browsers.

Bernie wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 10 2008 9:52 PM

With the same code, the behavior is different on FireFox.  If run the same code on FireFox, the file selection dialog does not automatically open.

Bernie

Chtopor wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 17 2008 2:27 PM

Sorry,  but this code not supported in Opera!

Bernie wrote re: The proper way to open a file dialog from your webpage
on Wed, Feb 18 2009 5:09 PM

Is there any way to change the size of the resulting Browse button?

Bernie

rana wrote re: The proper way to open a file dialog from your webpage
on Thu, Jul 9 2009 8:25 AM

need to be cross browser compatible.

prof wrote re: The proper way to open a file dialog from your webpage
on Thu, Aug 13 2009 5:09 PM

ok... so i think some people here need to start thinking about cross-browser testing???

i have read this article + all these comments 3 times over... so IE is certainly not the only browser and definately the worst out there. Statistics show that Firefox is amongst the most used globally. This will not work in firefox. Many code samples out on the net (javascript related) are IE-friendly... yet raise errors/warnings in other browsers.

My advice... Develop using the others (firefox, safari, opera etc)...then tweak for IE :)

Not trying to be rude. Sorry if it sounds so...

if the following link is what you're trying to achieve... I recommend www.appelsiini.net/.../demo.html, sorry if its not your solution, but it works in all my browsers (Firefox, Safari, Opera, Chrome, Flock, IE5.5, IE 6, IE7) for what i need

Regards

Prof

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Fri, Aug 14 2009 7:07 AM

Prof : OK, OK. But your browser statistics are way beside reality. And you're not mentioning IE8. The start of this post was in the IE6 days..

You're recomdation . It's looking nice but it is is using google ajax api's. You shouls mentiom that.

Prof wrote re: The proper way to open a file dialog from your webpage
on Fri, Aug 14 2009 4:12 PM

www.w3schools.com/.../browsers_stats.asp

"You're recomdation . It's looking nice but it is is using google ajax api's" -> it need not rely on google API's... all you need is simple smart CSS + optional minimal javascript :)

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Mon, Aug 17 2009 3:57 AM

c'mon, those statistics apply to the w3schools site only

But I do agree a good CSS and more JS is a good way to go to build better webapps. But before we start a discussion on that: this post is six years old and based on the 2003 state of asp.net web development

Rahul Dhammy wrote re: The proper way to open a file dialog from your webpage
on Tue, Nov 24 2009 2:33 PM

Hi when I use the above code in windows Vista instead of giving me the full file name it gives me the path like thi c:\fakePath\aa.mp3 where aa.mp3 is the name of the file I am picking from a location on my c drive.What is the work around for this>

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Wed, Nov 25 2009 6:29 AM

Which is the _full_ file name. What's the problem ? To0 much? No directory name needed ? You can always strip that.

Rahul Dhammy wrote re: The proper way to open a file dialog from your webpage
on Sun, Jan 17 2010 1:49 PM

Its fine now Ifound the solution to the problem.It is something with HTML 5.0

Zed wrote re: The proper way to open a file dialog from your webpage
on Mon, Jan 25 2010 12:39 PM

it fails on Firefox, but it works fine on IE. How to resolve that issue?

pvanooijen wrote re: The proper way to open a file dialog from your webpage
on Mon, Jan 25 2010 1:15 PM

If it does it will have to do with the way DOM elements are accessed in (the current versions of) FF.

This post is over 6 years old, these days you would assemble a piece of browser independent jquery.

I am happy people still respond to the post, but I'll leave the jquery up to you..

OK :?

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Devlicio.us