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.