Files input change event fires only once

If you want to upload twice, clear file input value

$('input[type="file"]').val(null);

jsfiddle test

I'm not sure why but none of the answers to this old question are all that simple. Here's the way to do this easily today...

with jquery...

$('#myfileinputfieldid')[0].onchange = function(e) {
 //do something with e.  Like write an image to a canvas or make a yummy cup of coffee
  e.target.value = '';
};

that's it after you have changed the value to something other than the file that was selected the next time the file input is clicked the onchange event will fire.

It appears that the change event listener is being removed because you're using innerHTML to update the same element (wrapper) that the input itself is inside. So the contents of the wrapper element – including the file input – is being re-rendered, and along the way, the event listener is removed (or, rather, it's connected to an element that's no longer there).

Here's a simple jsfiddle that does exactly the same as your code, except that it prints the selected file names in a different element than the element the input is in. And it works (in WebKit, anyway)

Here's further proof (I basically copied your code, and only added a line to re-register the event listener after the modification of wrapper.innerHTML)

So, the change event does fire for each change, but the input that's being observed is removed by the use of innerHTML on the input's parent element.

I honestly don't know whether this is a legitimate browser bug or not. It makes sense for innerHTML to "overwrite" the existing input element, yet the browser is smart enough to not not reset the input's value, so you'd think listeners would stick around too… so… well, it's confusing