Need to "Open Dialog" but don't know how

Have tried snippets from the web, but no dice so far...

[neophyte]

Hello All -

I've got a client who wants "upload file" functionality within his project, but he won't go for the usual <input type="file"> route... he just wants a button that, when clicked, opens an "open dialog" window from which the user can locate/select the file to be uploaded.

At first, I though "yeah, okay. No problem". Famous last words as I'm a php guy but (amazingly) have yet to touch javascript.

Anyway, I found something promising on one site - which "hides" the regular type="file" input, but (apparently) still feeds the selected file information to the file input. This all seemed great - and I thought my angst was over - until I tried it and... well... clicking the button does nothing. Arg.

Can someone here please take a look at the code below (extraneous tags stripped out as per posting rules) and tell me where this script is going wrong so I can make it right?

So, this script needs to 1). Open a file dialog to allow the user to select a file, and then 2). once the file is selected, the value (the path of the selected file I guess) is passed to the "hidden" <input type="file">.

Really appreciate any insight and assistance.

Thanks to all in advance!
Neophyte

*********************

<script language="javascript">
function openFileOption()
{
document.getElementById("file1").click();
}
</script>

<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">Upload CV:</label>
<input type="file" id="file1" style="display:none">
<input type="button" value="Browse for CV" onclick="openFileOption();return;" />

[eelixduppy]

What you have will work in IE but not in mozilla; I'm not sure if you can do this with mozilla but you can keep looking around.

As for setting the value of the selected file to the hidden input, you can use the onChange event handler to your advantage, however I don't see a point to setting the filename to a hidden input field when you can just submit file input as is (you can't see it anyway). Then handling the file upload server side would be easier, as well.

It would look like this, though, if you did do your approach:

<input type="file" id="file1" style="display:none" onChange="sethidden();"> 

Good luck.