Filepicker HTML multi - récupère les fichiers en cours d'utilisation

12

Le problème suivant s'est produit lors de l'utilisation de Firefox v73 sur Windows 7:

Dans mon code, j'utilise un sélecteur de fichiers multiples en html pour télécharger jusqu'à 100 fichiers parallèles:

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

Les fichiers seront envoyés à une API REST qui les traitera ensuite. Lorsque je sélectionne un seul fichier (dans l'explorateur de fichiers) qui est actuellement utilisé, j'obtiens un message d'erreur (probablement par fenêtre) qui me dit que le fichier ne peut pas être sélectionné car il est en cours d'utilisation. Si j'essaie de sélectionner plusieurs fichiers contenant un ou plusieurs fichiers en cours d'utilisation, aucune erreur ne se produit, mais le téléchargement semble s'arrêter lorsque le fichier en cours d'utilisation est atteint et en attente de libération du fichier. Cela conduit à demander d'attendre un timeout (qui est de 1 minute dans mon cas).

Existe-t-il une option pour résoudre le problème (dans le fichier utilisé) avant d'essayer de télécharger les fichiers?

PS: J'ai essayé la même chose dans Chrome et il renvoie une erreur avant d'envoyer la demande à l'API REST.

Kevin H.
la source
Pouvez-vous montrer votre appel ajax?
Islam Elshobokshy

Réponses:

3

Cela ressemble à un problème de système d'exploitation.
Quelque chose empêche l'accès à votre fichier et cela nécessite une correction de votre côté.

Je doute que ce soit un problème courant, et il est assez difficile de créer une solution sans pouvoir rencontrer le même problème, mais une chose que vous pouvez essayer est de lire vos fichiers avant de les envoyer. Cela peut être fait très facilement avec la Blob.prototype.arrayBufferméthode, qui peut être polyfilled.

Pour éviter beaucoup d'E / S, vous pouvez même essayer de n'en lire qu'une petite partie, grâce à la Blob.prototype.slice() méthode.

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>

Kaiido
la source
Merci Kaiido pour la solution. Il y a votre réputation +50. Gareautrain!
Kevin H.
0

Pour sélectionner plusieurs fichiers pour lesquels vous n'utilisez pas https://github.com/blueimp/jQuery-File-Upload

RavinduKD
la source
L'utilisation de jQuery n'est actuellement pas une option pour moi en raison des limitations techniques du côté client.
Kevin H.