16.03.2025

Acompanhando o Cancelamento de Entrada de Arquivo em HTML: Uma Solução

Resposta Rápida

Você pode determinar se o botão cancelar de um elemento de entrada de arquivo foi pressionado verificando se a propriedade files está vazia após o evento change ocorrer:

document.querySelector('input[type="file"]').addEventListener('change', (event) => {
  if (!event.target.files.length) {
    console.log('Seleção de arquivo cancelada. Ou ocorreu algo diferente?');
  }
});

Se o usuário pressionar cancelar, nenhum novo arquivo será selecionado, e a propriedade files permanecerá inalterada — vazia. Bem simples, não é?

Utilizando Eventos de Foco

Para identificar quando o usuário pode cancelar, podemos monitorar os eventos de foco e desfoco no campo de entrada de arquivo:

let fileInput = document.querySelector('input[type="file"]');
let isFocused = false;

fileInput.addEventListener('focus', () => {
  isFocused = true;
});

fileInput.addEventListener('blur', () => {
  if (isFocused && !fileInput.value) {
    console.log('Cancelamento ocorreu! Atenção!');
  }
  isFocused = false;
});

Com esses eventos, podemos perceber a distração — ou a ausência dela — no momento em que a entrada perde o foco, permitindo-nos notar o cancelamento.

Usando a API de Acesso ao Sistema de Arquivos

Um método mais moderno e preciso é empregar a API de Acesso ao Sistema de Arquivos:

if ('showOpenFilePicker' in window) {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    // Tratamento adicional do arquivo selecionado aqui
  } catch (e) {
    if (e.name === 'AbortError') {
      console.log('Cancelamento registrado! Ações canceladas!');
    }
  }
}

A função showOpenFilePicker, como uma caixa surpresa, lança uma exceção se a seleção foi cancelada.

Considerando as Diferenças entre Navegadores

É importante considerar as diferenças entre navegadores. Pense nas situações que os usuários podem encontrar:

• Elementos Interativos: Crie um diálogo com um fundo clicável. Qualquer clique fora dele pode sinalizar um cancelamento.
• Instruções Claras: Texto ou um ícone como "Confirmar Seleção" ajuda os usuários a tomarem decisões confiantes.
• Alternativas: Forneça um botão "Limpar" próximo à entrada de arquivo para oferecer mais opções aos usuários.

Lidando com Casos Especiais

Cenários especiais, como adaptação para dispositivos móveis e re-seleção de arquivos, exigem atenção adicional:

• Dispositivos Móveis: Novas questões surgem com telas sensíveis ao toque. Use os eventos touchstart e touchend.
• Re-selecionando Arquivos: Se o usuário seleciona o mesmo arquivo novamente, o evento change não será acionado. Limpe o valor do campo de entrada antes de cada evento focus para lidar com isso.

Visualização

Imagine uma câmera na porta da frente que observa todas as entradas:

🚪🛎️📹: [Documentando visitantes, Gravando ações]

Quando uma pessoa toca a campainha (seleciona um arquivo), recebemos uma mensagem:

💡: Arquivo selecionado!

No entanto, se o visitante sai (pressiona cancelar), a câmera registra isso, mas simplesmente responde de forma ambígua:

🤷‍♂️: O visitante veio, mas nenhum arquivo foi deixado. Provavelmente, a seleção foi cancelada!

Criando uma Solução Abrangente

A segurança de sistemas complexos não depende apenas de um método. Aqui, podemos usar vários:

• Foco e Desfoco: Essas são suas linhas de defesa primárias. Se você capturar algo, a tarefa está meio caminho andado.
• Mudança Aprimorada: Um manipulador adicional de evento change fortalecerá sua proteção.
• Backup para os Espertos: Se o evento change não ocorrer após focus dentro de um determinado tempo (setTimeout), o cancelamento pode ter ocorrido.
• Gerenciamento de Ações do Usuário: Direcione os usuários a confirmar sua seleção ou cancelá-la, fornecendo prompts.

Trabalhando na Experiência do Usuário

Se capturar o cancelamento é crítico, vale a pena repensar a jornada do usuário:

• Instruções Claras: Após selecionar um arquivo, um botão de confirmação de seleção é seu melhor assistente.
• Feedback Consistente: Uma interface de alerta ou janela modal que incentive a ação ajudará a criar um senso de envolvimento e interação para o usuário.

Recursos Úteis

1. Usando arquivos em aplicativos web - API Web | MDN — um guião detalhado do MDN sobre trabalhar com arquivos, incluindo a detecção de cancelamentos em entradas de arquivo.
2. html - Como determinar se o cancelar foi clicado no input de arquivo? - Stack Overflow — discussão sobre este tema com várias soluções no Stack Overflow.
3. HTML input type="file" — informações úteis e exemplos de como usar o tipo de entrada de arquivo em HTML, fornecidos pelo W3Schools.
4. Lendo arquivos em JavaScript | Artigos | web.dev — uma visão geral de métodos para ler arquivos com JavaScript, útil para entender o manuseio de entradas de arquivo.
5. Template Codepen para reconhecer cancelamento na entrada de arquivo — uma demonstração ao vivo para praticar a habilidade de acompanhar eventos de cancelamento em elementos de entrada de arquivo.

Video

Navigation