Remove input type file in IE10 not works

Question

This was discussed a lot, but all of these solutions not work:

$("#getFile").val('');

Nor this: document.getElementById("getFile").value = "";

When console.log after using one of this - it prints the value of last file attached. Also cloning not works, although remove the input value.

I want to trigger the event "change" when the user uses the same file after removing. The problem is thatthe value of the input is the last file uploaded.

Answer 1

why not just track the value with another variable and do an if statement? Like var lastUpload = document.getElementById("getFile").value;

then

addEventListener("change", function() {
  if(lastUpload === document.getElementById("getFile").value) {
    ...
  }
);

Answer 2

I think this is only possible if you can reset the form as well, see below:

 <form action="#" id="form">
     <label>Choose File: </label> <input type="file" name="getFile" id="getFile" /><br />
     <button type="button" onClick="removeFileName()">Clear File</button>
 </form>

And JS:

function removeFileName(){
    form.reset();
    var field = document.getElementById("getFile");
    console.log(field.value);
}