IE clears input[type="file"] on submit

Question

I have a page (demo):

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#id_button").click(function(e) {
                    $("#id_file").click();
                });
            });
        </script>
    </head>
    <body>
        <form method="post" enctype="multipart/form-data" action="http://www.google.com/">
            <input type="file" name="file" id="id_file" />
            <input type="button" id="id_button" value="fake button" />
            <input type="submit">
        </form>
    </body>

</html>

if I open browse dialog via clicking "fake button", select file (I see it in input[type="file"]), than click submit button and no post happens, the input[type="file"] is cleared.

What should I changed to get it work?

I get this problem in IE8 and IE10.

PS: file input will be hidden, so user will work only with fake button.

What do you mean by 'cleared'. Do you mean IE removes the markup or do you mean it removes the selected file? If you have `display: none`, try changing that to `visibility: hidden` instead. — reggaemahn, Sep 18 '13 at 14:33
@JeevanJose no, after alert input is cleared. and focus set to it. — Andrey Koltsov, Sep 18 '13 at 15:00

score 3 · Answer 1 · answered Sep 18 '13 at 14:33

All of the browsers have different behavior when it comes to what they allow you to do from javascript with regards to programmatically clicking the input button for file inputs.

The best solution I have found that seems to work cross browser is to set the opacity to 0 (do not use display:none) and put the button underneath the input, so the user clicks through the 0 opacity input to your button, thus firing the input select dialog.

A good writeup on styling the file input can be found here: http://www.quirksmode.org/dom/inputfile.html

score 1 · Answer 2 · edited Sep 18 '13 at 15:15

1

http://jsfiddle.net/j38Wj Works fine in Google Chrome but does not work in IE 10. As I think IE does not allow select file by external 'click' event. Only one way to "customize" input[type=file] is usage of opacity style to hide it and relative positioning of custom button control below it. Working example: http://blueimp.github.io/jQuery-File-Upload/

[...]

edited Sep 18 '13 at 15:15

Pavlo

43,301
14
77
113

answered Sep 18 '13 at 15:01

Артем Кустиков

381
3
6

http://blueimp.github.io/jQuery-File-Upload/ looks realy cool I'll try it tomorrow, your jsfiddle doesn't work. – Andrey Koltsov Sep 18 '13 at 15:06

score 0 · Answer 3 · edited May 23 '17 at 11:43

I think all browser does that behaviour for security reason. When you submit a form, you are redirected to a different page(or the same page) and if you are directed to the same page, the form is re-initialized. In this case, you simply can NOT set the value of file for security reason.

From example, How to set a value to a file input in HTML?, you don't want this happen

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:\passwords.txt">
</form>
<script>document.foo.submit();</script>

score 0 · Answer 4 · answered Jul 29 '15 at 20:10

Add a label tag along with the input file element. Set the 'for' attribute of the label to the id of the input file element.

Then when you click on the label the input file element will 'click' and the file dialog will open.

Then simply style the label however you like. Have tried on various IE versions.

IE clears input[type="file"] on submit

4 Answers4

Linked