26.03.2025

Obtendo o Nome do Arquivo a partir do Tipo de Entrada=file: Um Guia Detalhado

Resposta Rápida

Para obter o nome de um arquivo selecionado via <input type="file">, basta adicionar um ouvinte de evento 'change' e acessar a propriedade name do primeiro arquivo na lista files do elemento de entrada. Aqui está um exemplo do código:

document.querySelector('input[type="file"]').addEventListener('change', function() {
  console.log("Arquivo selecionado:", this.files[0].name);
});

Você deve colocar esse script logo após o elemento de entrada HTML:

<input type="file" />

Essa abordagem reduz a carga do servidor, já que os arquivos não são enviados imediatamente, e melhora a interação do usuário ao fornecer um feedback instantâneo sobre o arquivo selecionado.

Explicação Detalhada

Vamos explorar este assunto mais a fundo. Vamos investigar várias maneiras de obter o nome do arquivo, considerar o manuseio da seleção de múltiplos arquivos, métodos para extrair informações adicionais dos arquivos e discutir interações do navegador, juntamente com formas de fornecer feedback informado ao usuário.

Trabalhando com Propriedades do Arquivo e Manipulando Seleções Múltiplas

Obtendo Propriedades Adicionais

Além do nome do arquivo, você também pode obter outros dados, como o tipo e o tamanho do arquivo, usando a API de Arquivos:

document.getElementById('fileInput').addEventListener('change', function() {
  if (this.files.length === 0) {
    console.log('Nenhum arquivo selecionado. Talvez seja hora de um café ☕️.');
  } else {
    const file = this.files[0];
    console.log("Arquivo selecionado:", file.name);
    console.log("Tipo do arquivo:", file.type);
    console.log("Tamanho do arquivo:", file.size, "bytes");
  }
});

Verificar a ausência de um arquivo selecionado ajuda a lidar adequadamente com esse cenário sem lançar erros.

Manipulando Seleções Múltiplas de Arquivos

Se o <input> tiver o atributo multiple, você pode processar os arquivos selecionados da seguinte maneira:

document.getElementById('multiFileInput').addEventListener('change', function() {
  for (let i = 0; i < this.files.length; i++) {
    const file = this.files[i];
    console.log(`Arquivo ${i + 1}:`, file.name);
  }
});

Interação do Usuário e Compatibilidade entre Navegadores

Notificações Amigáveis ao Usuário

Para melhorar a experiência do usuário, você pode formatar o tamanho do arquivo em unidades mais familiares, como kilobytes ou megabytes:

function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

Agora, os tamanhos dos arquivos são exibidos de uma maneira que é compreensível para qualquer usuário.

Garantindo Compatibilidade

Diferentes navegadores podem ter capacidades variadas, então seu código deve ser compatível com diferentes versões de navegadores. Embora a maioria dos navegadores modernos tenha bom suporte para manipulação de arquivos, algumas versões desatualizadas podem enfrentar desafios.

Visualização

Vamos ilustrar isso com uma analogia de um microfone aberto:

🎤 - Ninguém está aqui (nenhum arquivo selecionado)
🎤 - Aguardando participantes…
🎤 - Temos alguém participando! (arquivo selecionado)

Após selecionar um arquivo, temos:

document.getElementById('fileInput').onchange = function() {
    console.log("Em destaque: " + this.files[0].name);
};

E então o nome do arquivo é anunciado:

🔊 **Nome do Arquivo:** "faixa_incrivel.mp3"

Nota: Lembre-se de substituir 'fileInput' pelo ID do seu elemento de entrada.

Bônus

Manipulação de ID Exclusivos

Para cada <input type="file"> na página, certifique-se de usar um id exclusivo para lidar corretamente com cada elemento de entrada.

Usando jQuery

$('.fileUploader').on('change', function() {
  alert("Arquivo selecionado: " + this.files[0].name);
});

jQuery pode ser utilizado para uma assinatura de evento mais fácil e elegante.

Validando a Entrada do Usuário

É essencial validar os dados de entrada antes de processá-los para evitar problemas potenciais.

Recursos Úteis

1. Usando arquivos em aplicativos web - API Web | MDN - Um guia sobre como trabalhar com arquivos em aplicativos web.
2. Arquivos e FileReader - Um tutorial detalhando o manuseio de arquivos em JavaScript.
3. Lendo arquivos em JavaScript usando a API de arquivos e FileReader | web.dev - Um artigo sobre como ler arquivos em JavaScript usando APIs modernas.
4. Padrão HTML - O padrão oficial relacionado a campos de entrada de upload de arquivos.
5. evento change HTMLElement - API Web | MDN - Uma descrição detalhada do evento de mudança, que desempenha um papel crucial no rastreamento de seleções de arquivos.

Video

Navigation