13.02.2025

Detecção de Seleção de Arquivo Repetida em Input Type="file"

Resposta Rápida

Para acionar o evento de mudança ao selecionar o mesmo arquivo, utilizamos o elemento <input type="file">. Isso envolve redefinir o valor deste campo de entrada após um arquivo ter sido selecionado:

const inputFile = document.getElementById('fileInput');
inputFile.addEventListener('change', () => {
  // Aqui inserimos nosso código...

  inputFile.value = ''; // *É mamão com açúcar*, como se o arquivo nunca tivesse estado aqui
});

Esse método nos permite redefinir o campo de entrada após a seleção de um arquivo, garantindo que possamos rastrear a seleção do mesmo arquivo várias vezes.

Quando Você Precisa Fazer Upload do Mesmo Arquivo Várias Vezes...

A Habilidade de "Ordenhar" a Vaca Mais de Uma Vez

Existem várias maneiras de limpar o valor do campo de entrada que funcionam efetivamente com várias bibliotecas e JavaScript puro:

// JavaScript Puro
// Dica profissional: Nenhum framework foi machucado na escrita deste código.
inputFile.onclick = () => inputFile.value = '';

// jQuery
// jQuery provou seu valor, apesar da sua idade.
$('#fileInput').on('click', () => $('#fileInput').prop('value', ''));

// React
// Rendemos homenagem ao React.
const handleFileClick = (event) => {
  event.target.value = null;
  // O componente re-renderiza depois da mudança de estado
}

.attr e .prop no jQuery: Qual é a Diferença?

No jQuery, usar .prop('value', '') em vez de .attr('value', '') resulta em resultados mais confiáveis. Essa mudança afeta diretamente a propriedade e fornece maior estabilidade:

// Desbloqueando a mágica do jQuery
$('#fileInput').on('click', () => $(this).prop('value', ''));

// Pode parecer inocente, mas é melhor não arriscar
$('#fileInput').on('click', () => $(this).attr('value', ''));

jsFiddle como um Playground

Seu laboratório de testes para experimentação é o editor online jsFiddle. Aqui você pode praticar as abordagens mencionadas acima. Todas as inovações estão a apenas um clique de distância.

Preparação e Avisos

Ao aplicar esse método, é essencial levar em consideração vários pontos importantes:

• Realize testes minuciosos em diversos navegadores para garantir uma relativa independência de diferentes plataformas.
• Aprimore seu manipulador de evento de clique para garantir uma seleção de arquivo logicamente precisa.
• Esteja preparado para restrições de segurança impostas pelo navegador, que podem levar a consequências imprevisíveis.

Visualização

Imagine que seu trabalho é capturar cada maçã que cai de uma árvore em fotografias. Normalmente, você só tira fotos de novas maçãs.

📷🍎: Primeira foto da maçã (primeira seleção de arquivo)
🔄🍎: Olha, a maçã caiu de novo (o mesmo arquivo selecionado novamente)

Mas se você configurou um evento de mudança em seu código, pode reagir a cada queda, mesmo que seja o mesmo objeto:

document.getElementById('file-input').addEventListener('change', function() {
  this.value = null;
});

📷🍎🔽: Caiu de novo? (Mudança detectada para o mesmo arquivo)

A cada redefinição do campo de entrada, você conseguirá “ver” cada alteração, mesmo que não esteja associada ao surgimento de um novo objeto.

A Sabedoria do TypeScript

Garantindo a Segurança de Tipo com TypeScript

Ao utilizar TypeScript, garantir a segurança de tipo ao limpar o valor do campo de entrada se torna significativo:

const handleFileClick = (event: React.MouseEvent<HTMLInputElement>) => {
  const input = event.target as HTMLInputElement;
  // Agora estou em paz sabendo que input.value existe. A segurança de tipo está garantida.
  input.value = '';
};

Aqui deixamos claro que event.target é um HTMLInputElement, permitindo modificar input.value sem arriscar a segurança do código.

Casos Especiais Adicionais, Porque a Vida Está Cheia de Surpresas

Cliques Acidentais e Seleções Incertas

Se um usuário clica acidentalmente no campo de entrada, mas depois cancela a seleção do arquivo, é crucial garantir que um arquivo foi selecionado:

inputFile.addEventListener('change', (event) => {
  if (!event.target?.files?.length) {
    // Sem arquivos aqui...
    return;
  }

  // A lógica de processamento do arquivo começa aqui…
  event.target.value = null; // Redefinindo o valor para uma nova seleção de arquivo
});

Se o Usuário Selecionar Acidentalmente o Mesmo Arquivo

Em aplicações onde não há necessidade de fazer upload do mesmo arquivo novamente, pode ser necessário implementar lógica adicional para prevenir seleção repetida acidental:

let lastFile;

inputFile.addEventListener('change', (event) => {
  const currentFile = event.target.files[0];

  if (currentFile === lastFile) {
    // Oh não, o arquivo foi selecionado novamente! Isso não deveria acontecer.
    console.log('Seleção repetida de arquivo detectada.');
    return;
  }

  lastFile = currentFile;
  // Continue processando o arquivo
});

Recursos Úteis

1. Usando arquivos em aplicações web - Web API | MDN – Descubra o mundo do manuseio de arquivos no desenvolvimento web.
2. O evento 'onchange' – Aprenda em quais circunstâncias o evento "onchange" será útil.
3. Padrão HTML – Estude os padrões e familiarize-se com as regras sobre os campos de entrada de arquivos.
4. HTMLElement: evento change - Web API | MDN – Mergulhe profundamente no guia sobre como manipular eventos de mudança para elementos HTML.

Video

Navigation