IE - File Input Gains Focus, Loses Value on Submit

Question

I have an input type=file that is clicked by the onclick event of a button.

When the form containing this input is submitted, IE 10 has issues - the file input gains focus AND loses its value - and the form is not submitted.

Edit: The file browser does open, and it does gain the value, it just loses it on submission.

I'm hoping for a solution, if not, a different method of achieving the same results.

Here is the code:

<form action=".." method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file">
    <button type="button" onclick="$('#file').click();">Upload File</button>
    <button type="submit">Submit</button>
</form>

In actuality I have #file hidden (hence the .click()), but I know that's not the issue, because I tested it with #file visible as well. I think the .click() is causing the problem somehow, but I need a workaround.

File inputs generate their own buttons. Why are you adding yours? — Diodeus - James MacFarlane, Aug 26 '13 at 20:10
It has to be styled in a particular way. By hiding the file input and using the button with the onclick, this is achieved easily... Save for this error. — Scott Compton, Aug 26 '13 at 20:13
Have you cross-browser tested this? i'm pretty sure some browsers are very picky in allowing other inputs to open an open file dialog when the file input is hidden. — Kevin B, Aug 26 '13 at 20:16
might want to take this approach: http://stackoverflow.com/a/2048060/1167867 — Tim Mac, Aug 26 '13 at 20:17
It works in Chrome. Not in IE10. Not sure about earlier IEs. — Scott Compton, Aug 26 '13 at 20:18
@ScottCompton -- Definitely check earlier versions (IE9 especially) — tymeJV, Aug 26 '13 at 20:25

score -2 · Answer 1 · answered Nov 02 '13 at 07:19

-2

If you want your upload button to be styled try this " input style "

answered Nov 02 '13 at 07:19

user2936438

1
2

IE - File Input Gains Focus, Loses Value on Submit

1 Answers1