One click file dialog in HTML

Question

I am looking for a one-click solution that will call up a file open dialog and from that dialog, send the file name to the next page. I stole this code, but it requires 2 clicks to get to the next page:

<form enctype="multipart/form-data" action="ImportTOA.php" method="POST" accept="text/csv">
    <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    <!-- Name of input element determines name in $_FILES array -->
    Upload Daily TOA Logs: <br /><input name="userfile" type="file" />
    <input type="submit" value="Send File" />
</form>

I don't need to upload the file, I just need to pass the file name that the user chooses.

"I stole this code", that sounds kinda bad... – DarkAjax Mar 08 '13 at 22:53 — DarkAjax, Mar 08 '13 at 22:53

score 0 · Answer 1 · edited May 23 '17 at 10:25

If you don't need to upload the file, just remove the enctype. The file name should get passed without the upload. Then you could submit the form on the change event on the file. I'll need to double check the documentation, but I think change fires on the file input.

Looks like IE might be a bit different: Jquery: change event to input file on IE

You don't even really need to "submit" the form, just grab the file name via javascript and do whatever you need to do.

score 0 · Answer 2 · edited Oct 30 '13 at 07:16

OK. With a sufficiently narrow Google query, I found the answer. Should anyone come along to read this thread, here's the code I borrowed that worked:

<form enctype="multipart/form-data" action="ImportTOA.php" method="POST" accept="text/csv">
    <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    <!-- Name of input element determines name in $_FILES array -->
    Upload Daily TOA Logs: <br /><input name="userfile" type="file" onChange = "this.form.submit()" />
</form>

One click file dialog in HTML

2 Answers2