Trying to use an open file dialog

@lcwakemanNov 29.2006

I am using the following HTML in the hopes of allowing the user to use a Open File Dialog to select a file and putting the file name in the text box:

[CODE]<Input type=”text” size=”100″ maxlength=”150″ name=”Player” value=”Default”> <input type=”file” name=”FileDialog” size=”100″ onchange=”this.form.elements.Player.value = this.value”>[/CODE]

The problem is that the user is shown two text boxes. I tried just using the <input type=”file” but I couldn’t put a current value in it’s text box.

Is there a way to use javascript to open the file open dialog and return the file name from a button onclick event?

to post a comment

JavaScript

12 Comments(s) _↴

@_Aerospace_Eng_Nov 29.2006 — #This works fine

 &lt;input type="text" size="100" maxlength="150" name="Player" value="Default"&gt;
 &lt;input type="file" name="FileDialog" size="100" onChange="this.form.Player.value = this.value"&gt;

@lcwakemanauthorNov 29.2006 — #The code works fine, but the effect is that there are two text boxes where I want only one, and I want to put the default value in the exposed text box. I can set the value of a text box but a file box ignores the value. So what I want to do is something like the following:

[CODE]<Input type="text" size="100" maxlength="150" name="Player" value="Default">
 <input type="button" name="FileDialog" oncclick="openFileDIalog('default')">
 [/CODE]

and have the openFileDialog function set the value of the text box.

@_Aerospace_Eng_Nov 29.2006 — #Just use a hidden field. Leave the file one. Why are you trying to do this in the first place? Why have two fields? Why not just use the file field.

&lt;input type="hidden" name="Player"&gt;
 &lt;input type="file" name="FileDialog" size="100" onChange="this.form.Player.value = this.value;alert(this.form.Player.value)"&gt;

@lcwakemanauthorNov 29.2006 — #The value is saved and used again in other places. If a value has been set, I want it displayed in the text box. I have not figured a way to do this with a file box.

@_Aerospace_Eng_Nov 30.2006 — #You can't set the default value of the file input. Its a security risk.

@lcwakemanauthorNov 30.2006 — #Which is why I want a piece of JavaScript that will open the File Open Dialog. I don't opne the file, I save it's location in the MySQL database where it is used in other area of the Web page (as in my prior thread on SendKeys). It is a configuration parameter.

Why is it considered a security risk if the contents of the text box is set by the web server and seen by the user? If I wanted to do malicious things to the users computer, I would just do it in hidden code.

@_Aerospace_Eng_Nov 30.2006 — #I think you are making this harder than it has to be. First you can't call the file open dialog, its not a function. Second just use the normal file input and just pass that value to what ever script you want. If you are submitting to a server side script then just post that value of the file input to the script and you will be able to save it in the database. You won't have to save the file, you will just get the file location.

Its a security risk because if you were able to set the default value then you would be able to get any file from the users computer as long as you knew the location.

@lcwakemanauthorNov 30.2006 — #I don't think you are getting what I am trying to do. I need the fully qualified name of file any where on the users system. The easiest way for the user to enter it is with a file open dialog or some similar createion. I am not openint this file, in fact I later run the file (see http://www.webdeveloper.com/forum/showthread.php?p=668877#post668877). The issue is that there are several parameters that need to be configured and I would like the user to see what is currently configured.

BTW - A malicious programmer could wreak havoc without haveing a file dialog prepoulated. Things are in very predictable places on most windows systems and with a little work, your could detect a Mac or linux or evan an OpenVMS system and predict where important stuff can be found. Populating a "file" box in and of itself is not a security risk (IMHO).

@LightTechMar 07.2010 — #see this link, I hope to be useful:

http://codebetter.com/blogs/peter.van.ooijen/archive/2003/12/03/4224.aspx

@adiskOct 24.2010 — #Solution what i find:

- create button (input type="button")

- create file input (input type="file")

- place it over button

- move it when mouse move for sure what user clicked on it

- wait change event and run callback function

See script there upload-at-click

@Paula78Aug 16.2011 — #I am using the following HTML and everything works ok..

@rnd_meAug 16.2011 — #use a 1% opacity file input over a textbox.

the user thinks they are clicking the textbox, but they are actually clicking the file input, opening the browse dialog.

this is also used to style file inputs...

Also in #JavaScript _↴

Who knows a code for YES Frames page that...Pulldown menu with multiple frames drops behind form field Convert DOM to Javascript

Success!

Help @lcwakeman spread the word by sharing this article on Twitter...

Tweet This

Trying to use an open file dialog

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Trying to use an open file dialog

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴