IE 11 lock the file when using HTML input=file tag

Question

1. I choose the file using browse in the file input in IE11

2. I deleted the file using shift+delete in the Explorer

3. Then when I refresh the folder, the file that I deleted reappear again in Explorer.

Is there anyway that I can release the file handle by at the client side javascript? I tried that test in IE 8 but that issue didn't occurred.

Any kind help is appreciated.

Answer 1

I could release the file handler as following in IE 11.

    document.getElementById("fileToUpload").value=""; // input file field
    document.getElementById("uploadForm").reset(); // form that containing input file field

Answer 2

I was also able to release the file handler by setting the inputElement.value="" , but I wanted to add some more insight:

Through trial and error I eventually found this only works if you do not reference inputElement.files in any way. This includes even just checking for its existence. To keep IE11 from doing its death grip, I ended up with something like this:

// html
<form id="formID">
  <input
    id="inputID"
    name="file"
    type="file"
  />
</form>

// javascript
var formData = new FormData(document.getElementById("formID"));
someBackendService.someUploadFileMethod(formData).then(function() {
  var inputElement = document.getElementById("inputID");
  inputElement.value = "";
}

As long as the file data stays inside a FormData object, IE11 will release the lock. Unfortunately, with this setup, I was unable to find a way to support uploading multiple files or drag-and-drop.

A simple way to test whether the file is locked is to try renaming the directory the uploaded file came from. Another way is to use the Resource Monitor that comes with Windows: under the CPU tab, in the Associated Handles subsection, type your file name in the 'Search Handles' field.