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.


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>


Obrigado Kaiido pela solução. Sua reputação é +50. Lifesaver!
Kevin H.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.