File upload using input type=file not working in IE for first file, works on subsequent uploads

Question

Upload functionality works perfectly fine in Chrome, however it doesn't work on IE 11.

I'm trying to implement upload functionality by using the following dom element:

<input type="file" id="file-upload" class="hidden-inputs"/>

I'm triggering the click when the user clicks something else, the input itself is hidden. This is the code for that:

$("#file-upload").click();//triggering click

input.change(function(){//when file is selected
    var file = this.files[0];

    api.File.upload(path, file, function(err){//upload to server
         //do something in callback
    });
});

when I tried debugging the code, adding a breakpoint shows that it does not go into the function being called on change. This only occurs the first attempt I make at uploading a while, and if I keep trying over and over to upload the SAME file. However, If I attempt to upload a file once (doesn't work), then I select a difference file, it works perfectly. The same thing happens if I trigger the upload functionality, but instead of selecting an item the first time, I hit cancel, then I try the upload again, this time select a file, it will work perfectly. The on change event IS being triggered, so that isnt the issue.Any idea what could be causing this behavior, only in IE?? I'd appreciate the help!

edit: Also, in case it helps. When repeating the failed upload multiple times, and then selecting upload on another file, it will perform the upload the number of times you attempted it before.

Answer 1

IE is apparently less forgiving than Chrome. My issue was that I was triggering the click event before the actual on change function. Changing the order was all that needed to be done. First implement on change, then trigger the click.

Answer 2

IE won't let you hide a type="file" input for security reasons. Apparently, Chrome has a more refined way of detecting whether a user is actually interacting with the screen, versus whether events are triggered programatically. There are also reported issues with this in Opera and FF .

You can get around this issue with a css "hack":

[Note - tested in IE10 - did not test $.post() but I believe it should still work]

 $('input[name=upload]').change(function () { var file = this.files[0]; $('#results').html(file.name); // do something with the file... // api.File.upload(path, file, function(err) {} }); $('#upload-btn').click(function () { alert('working'); $('input[name=upload]').click(); }); 

 .up-overlay { display: block; width: 100px; height: 20px; overflow: hidden; } .btn-overlay { width: 110px; height: 30px; position: relative; top: -5px; left: -5px; } #upload_input{ font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px; left: -20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="up-overlay" style=""> <button id="upload-btn" class="btn-overlay" style="">Upload File</button> <input type="file" id="upload_input" name="upload" /> </div> <div id="results"></div> 

This doesn't explain a number of the described behaviors in your post, and I assume it's because there's additional factors at play in code that you haven't posted here.

It's pretty well documented on SO ( here , here , here , and the primary reference to this posted answer ) that you cannot trigger the change event of a hidden file input in a number of browsers. HTH