Hidden file input does not retain value on submit

Question

I have a hidden file input with a fake button and input for browser display consistency. I currently have the original input visible as well, and have discovered that using it to upload the file everything runs fine.

However using the button in "dummyfile" to trigger the click via javascript the value is loaded as expected, as well as in the UI. But when I click submit this time, it instead clears the value from the input and does nothing else. This only happens in IE, not in chrome. It is the source of the problem in a question I asked previously: https://stackoverflow.com/questions/19275901/internet-explorer-specific-form-post-with-file-input-returning-empty-file-list. I ask this as a separate question because it is relevant beyond the scope of that one.

HTML (this is in a partial view so I can add more inputs and return a file collection, I just pulled it out to the main view and hard coded the 0 in for this and another bug).

<div class="control-group">
   <label class="control-label" for='@String.Format("file{0}", 0)'>File</label>
   <div class="controls">
         <input type="file" name="files" class="hiddenFileInput" id='@String.Format("file{0}", 0)' />
         <div class="dummyfile">
              <input id="@String.Format("filename{0}", 0)" type="text" class="input disabled" name="filename" >
              <button type="button" class="btn btn-primary">Choose</button>
         </div>
    </div>
</div>

jQuery:

function fileUploadControlInit() {

        $('.dummyfile .btn').unbind("click").on("click", function (e) {
            $(this).closest("div").siblings(" :file").trigger('click');
        });

        $('.hiddenFileInput').on("change", function (e) {
            var val = $(this).val();
            var file = val.split(/[\\/]/);
            var fileName = file[file.length - 1];
            $(this).siblings("div").children(" :text").val(fileName);


            $("#UploadFile").prop('disabled', false);

        });
    }

maybe it has something to do with `class="input disabled"` in your dummyfile div — CSharper, Oct 10 '13 at 16:25
No, that just prevents typing, besides that is the control retaining its value. — Seth, Oct 10 '13 at 17:18

score 2 · Accepted Answer · edited May 23 '17 at 12:10

This is a security restriction built into Internet Explorer (I've tested v6.0 to v10), yes it allows you to programatically click the browse button but it will clear the box when you submit the form - basically to stop users from being tricked into uploading files.

So your options are to take a different approach to styling, this example basically makes the original button opaque on top of your nicely styled button (credit to Andrew here):

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    input[type=file] {
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
}

.button-container {
    position: relative;
}

.fake-button {
    border: 3px inset #933;
    pointer-events:none;
    z-index: -100;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

});//]]>  

</script>


</head>
<body>
  <form method="post" enctype="multipart/form-data" action="http://google.com/">
    <div class="button-container">
        <span class="fake-button">fake button</span>
        <input type="file" name="file" id="id_file" />
    </div>
    <input type="submit" />
</form>

</body>

</html>

Also mentioned on the other post there's a good write up of the various browser styling of file upload boxes here : http://www.quirksmode.org/dom/inputfile.html

Hidden file input does not retain value on submit

1 Answers1

Linked