HTML filepicker multi - get files in use

Question

The following problem occured using Firefox v73 on Window 7:

In my code i use a multi-file-picker in html to upload up to 100-files parallal:

<input type="file" id="files" name="files" multiple>

The files will be sent to a REST-API which process them afterwards. When i select a single file (in the file-explorer) which is currently in use, i get a error-message (probably by window) which tells me, that the file cannot be picked because it is in use. If i try to pick multiple-files which contain one or more files in use, i have no error occuring but the upload seems to stop when the file-in-use is reached and waiting for the file to be released. This leads to request to wait for a timeout (which is 1 minute in my case).

Is there any option to catch the problem (in use file) before trying to upload the files?

PS: I've tried the same in Chrome and it returns a error before sending the request to the REST-API.

Answer 1

That sounds like an OS issue.
Something is locking your file from being accessed and this needs a fix on your side.

I doubt it will be a common issue, and it's quite hard to build a solution without being able to experience the same issue but one thing you can try is to read your Files before you send them. This can be done quite conveniently with Blob.prototype.arrayBuffer method, which can be polyfilled.

To avoid a lot I/O, you can even try to read only a small part of it, thanks to Blob.prototype.slice() method.

const input = document.getElementById('inp');
const btn = document.getElementById('btn');

btn.onclick = async(evt) => {
  testAllFilesAvailability(input.files)
    .then(() => console.log('all good'))
    .catch(() => console.log('some are unavailable'));
}

function testAllFilesAvailability(files) {
  return Promise.all(
    [...files].map(file =>
      file.slice(0, Math.min(file.size, 4)) // don't load the whole file
      .arrayBuffer() // Blob.prototype.arrayBuffer may require a polyfill
    )
  );
}

<pre>
1. Select some files from the input
2. Change one of this files name on your hard-drive or even delete it
3. Press the button
</pre>

<input type="file" multiple id="inp">
<button id="btn">Test Availability</button>