Filepicker HTML multi - obtenha arquivos em uso

12

O seguinte problema ocorreu usando o Firefox v73 na Janela 7:

No meu código, eu uso um seletor de arquivos múltiplos em html para carregar até 100 arquivos paralelamente:

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

Os arquivos serão enviados para uma API REST que os processará posteriormente. Quando seleciono um único arquivo (no explorador de arquivos) atualmente em uso, recebo uma mensagem de erro (provavelmente por janela) informando que o arquivo não pode ser escolhido porque está em uso. Se eu tentar escolher vários arquivos que contêm um ou mais arquivos em uso, não ocorrerá nenhum erro, mas o upload parecerá interrompido quando o arquivo em uso for alcançado e aguardando a liberação do arquivo. Isso leva à solicitação de espera por um tempo limite (que é de 1 minuto no meu caso).

Existe alguma opção para detectar o problema (no arquivo de uso) antes de tentar fazer o upload dos arquivos?

PS: Tentei o mesmo no Chrome e ele retorna um erro antes de enviar a solicitação para a API REST.

Kevin H.
fonte
Você pode mostrar sua ligação ajax?
Islam Elshobokshy

Respostas:

3

Isso soa como um problema no sistema operacional.
Algo está impedindo que seu arquivo seja acessado e isso precisa de uma correção do seu lado.

Duvido que seja um problema comum, e é muito difícil criar uma solução sem ter o mesmo problema, mas uma coisa que você pode tentar é ler seus Arquivos antes de enviá-los. Isso pode ser feito de maneira bastante conveniente com o Blob.prototype.arrayBuffermétodo, que pode ser preenchido com polifólio.

Para evitar muitas E / S, você pode até tentar ler apenas uma pequena parte, graças ao Blob.prototype.slice() método

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
fonte
Obrigado Kaiido pela solução. Sua reputação é +50. Lifesaver!
Kevin H.
0

Para selecionar vários arquivos, por que você não usa https://github.com/blueimp/jQuery-File-Upload

RavinduKD
fonte
Atualmente, o uso do jQuery não é uma opção para mim devido a limitações técnicas do lado do cliente.
Kevin H.