10.03.2025

Abrindo um Diálogo de Arquivo em JS: Métodos Alternativos

Resposta Rápida

Facilite seu trabalho criando um elemento input oculto do tipo file e simulando um clique nele no seu código.

const inputElement = document.createElement('input');
inputElement.type = 'file';
inputElement.style.display = 'none'; 
document.body.appendChild(inputElement);

inputElement.click();

inputElement.onchange = (e) => console.log(e.target.files);

document.body.removeChild(inputElement);

Detalhes da Implementação

Selecionando Vários Arquivos e Tipos de Arquivo

Vamos permitir a seleção de múltiplos arquivos enquanto especificamos que estamos interessados apenas em imagens.

inputElement.multiple = true;
inputElement.accept = 'image/*';

Lendo Arquivos

Usaremos a API FileReader para trabalhar com os arquivos.

inputElement.onchange = async (e) => {
    const files = e.target.files;
    for (const file of files) {
        const reader = new FileReader();

        reader.onload = (readerEvent) => {
            // Processar os dados do arquivo
        };

        if (file.type.startsWith('image/')) {
            reader.readAsDataURL(file);
        } else {
            reader.readAsText(file, 'UTF-8');
        }
    }
};

Modificando a Interface do Usuário. 🐊

Aplicaremos elementos label e span/button para melhorar a interação com o usuário.

<label for="fileInput" class="custom-file-input">Selecionar Arquivo</label>
<input id="fileInput" type="file" style="display: none;" />

Feedback sobre os Resultados do Upload

Exiba notificações para o usuário sobre os resultados do upload ou qualquer erro que ocorrer.

reader.onload = (readerEvent) => {
    // Arquivo enviado com sucesso
};

reader.onerror = () => {
    alert("Ocorreu um erro ao ler o arquivo.");
};

Usando os Dados Enviados

Aqui está um exemplo de como usar os dados obtidos do arquivo enviado:

reader.onload = (readerEvent) => {
    document.body.style.backgroundImage = `url(${readerEvent.target.result})`;
};

Visualização

Transforme seu site para que os usuários possam facilmente enviar conteúdo.

  Era: Um mar de possibilidades
  Torna-se: Seu conteúdo favorito está sempre com você

Imediatamente após o usuário “clicar”, o processo de seleção de arquivo é acionado:

  Ação do Usuário: Clica no botão
  Reação do JavaScript: Diálogo de seleção de arquivo é exibido

Possíveis Problemas

Compatibilidade entre Navegadores

Não se esqueça de testar o código em todos os navegadores para evitar surpresas desagradáveis.

Segurança

Tenha cuidado ao lidar com arquivos desconhecidos. Segurança em primeiro lugar.

Performance

Tenha em mente que arquivos grandes e múltiplas operações de leitura podem afetar negativamente o desempenho da CPU.

Acessibilidade

Ao programar, considere os atributos ARIA e a usabilidade da navegação por teclado.

Recursos Úteis

1. Tag HTML <input type="file"> - HTML | MDN
2. Padrão HTML
3. Propriedades e Métodos de Elementos de Formulário em JavaScript
4. O JavaScript pode simular um evento de "clique" em um elemento de input de arquivo? - Stack Overflow
5. Dropzone - Biblioteca fácil de usar para arrastar e soltar com visualizações e indicadores de upload
6. Guia para Ler Arquivos em JavaScript | Artigos | web.dev

Video

Navigation