Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Validação de Arquivos

Referente ao curso JavaScript: entendendo promises e async/await, no capítulo Construindo a página e atividade Para saber mais: validação de imagens no upload

por DANILO HENRIQUE DA SILVA MIRANDA
| 36.1k xp | 9 posts

Inclui a validação de arquivos porém notei se se o usuário tentar duas vezes o mesmo arquivo não validado a function para de funcionar existe alguma maneira de contornar isto?

const uploadBtn = document.getElementById("upload-btn");
const inputUpload = document.getElementById("image-upload");

uploadBtn.addEventListener("click", () =>{
    inputUpload.click();
    
})

document.getElementById('image-upload').addEventListener('change', function(event) {
    
    var file = event.target.files[0];
    if (!file.type.match('image/png') && !file.type.match('image/jpeg')) {
        alert('Por favor, selecione uma imagem PNG ou JPEG.');
        file = '';
        return;
      }

      if (file.size > 2 * 1024 * 1024) {
        alert('A imagem deve ter no máximo 2MB.');
        file = '';
        return;
      }
      
    console.log(file)
  });
1 resposta
por Rafaela Petelin Silvério
| 313.1k xp | 695 posts
Alura Scuba Team Monitora de Fórum

Olá Danilo! Tudo bem?

Esse problema pode estar relacionado ao fato de que, após a primeira tentativa de upload falhar, o evento 'change' não é disparado novamente se o usuário tentar fazer o upload do mesmo arquivo. Isso ocorre porque o valor do input não está mudando, então o evento não é acionado.

Uma maneira de contornar isso é redefinir o valor do input após uma tentativa de upload falhar. Dessa forma, o evento 'change' será disparado mesmo que o usuário selecione o mesmo arquivo novamente. Você pode fazer isso adicionando inputUpload.value = ''; após cada validação falha. Ficaria mais ou menos assim:

document.getElementById('image-upload').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (!file.type.match('image/png') && !file.type.match('image/jpeg')) {
        alert('Por favor, selecione uma imagem PNG ou JPEG.');
        inputUpload.value = ''; // Reseta o valor do input
        return;
    }

    if (file.size > 2 * 1024 * 1024) {
        alert('A imagem deve ter no máximo 2MB.');
        inputUpload.value = ''; // Reseta o valor do input
        return;
    }
    
    console.log(file);
});

Com essa modificação, o input será "resetado" após uma tentativa de upload falhar, permitindo que o evento 'change' seja disparado novamente na próxima tentativa, mesmo que o usuário selecione o mesmo arquivo.

Espero ter ajudado. Em caso de dúvidas, conte com o apoio do fórum!

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!