Como Ativar Click em Input de Arquivo com JavaScript
Neste artigo você vai aprender a como ativar click em input de arquivo com JavaScript, vem conferir como é simples!
Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!
Introdução
O elemento “input” do tipo “file” é utilizado em formulários HTML para permitir que os usuários enviem arquivos, como imagens e documentos, para o servidor.
No entanto, a aparência e o comportamento padrão desses campos de arquivo podem ser limitados e pouco atraentes.
Uma solução comum é ocultar o campo de arquivo original e ativar o click em input de arquivo usando JavaScript.
Neste artigo, vamos explorar como fazer isso, garantindo que seu formulário seja funcional e agradável aos usuários.
Passo a Passo: Ativando Click em Input de Arquivo com JavaScript
Nesta sequência de passos abaixo você vai concluir o objetivo, com um mini projeto sendo codificado ao longo do artigo.
Ocultar o campo de arquivo original
Primeiramente, vamos ocultar o campo de arquivo original no HTML, para que possamos substituí-lo por um elemento personalizado.
<input type="file" id="arquivo" style="display:none;">
Criar um elemento personalizado
Agora, vamos criar um elemento personalizado que será exibido no lugar do campo de arquivo original.
Você pode estilizá-lo como desejar.
<button id="botaoArquivo">Escolha um arquivo</button>
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Adicionar um ouvinte de eventos ao elemento personalizado
Em seguida, usaremos JavaScript para adicionar um ouvinte de eventos ao elemento personalizado.
Quando o usuário clicar nesse elemento, o evento “click” será ativado e o campo de arquivo original será acionado.
document.getElementById("botaoArquivo").addEventListener("click", function () {
document.getElementById("arquivo").click();
});
Monitorar mudanças no campo de arquivo original
Para manter a funcionalidade do campo de arquivo, precisamos monitorar as mudanças no campo de arquivo original.
Quando um usuário seleciona um arquivo, podemos atualizar o elemento personalizado para exibir o nome do arquivo selecionado.
document.getElementById("arquivo").addEventListener("change", function (event) {
const nomeArquivo = event.target.files[0].name;
document.getElementById("botaoArquivo").textContent = nomeArquivo;
});
Juntando tudo
Agora, vamos juntar tudo. O código HTML e JavaScript completo ficará assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ativar Click em Input de Arquivo</title>
</head>
<body>
<input type="file" id="arquivo" style="display:none;">
<button id="botaoArquivo">Escolha um arquivo</button>
<script>
document.getElementById("botaoArquivo").addEventListener("click", function () {
document.getElementById("arquivo").click();
});
document.getElementById("arquivo").addEventListener("change", function (event) {
const nomeArquivo = event.target.files[0].name;
document.getElementById("botaoArquivo").textContent = nomeArquivo;
});
</script>
</body>
</html>
Note que aqui colocamos todo o código em um arquivo só, no caso o HTML.
Porém o correto é que você separe as responsabilidades de HTML, CSS e JavaScript.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Ativar click em input de arquivo com JavaScript é uma técnica útil para melhorar a aparência e a experiência do usuário em campos de arquivo de formulários HTML.
Neste artigo, vimos como ocultar o campo de arquivo original, criar um elemento personalizado e usar JavaScript para ativar o click no input de arquivo.
Ao seguir esses passos, você pode criar uma interface de usuário mais atraente e funcional para o envio de arquivos, melhorando a experiência geral do usuário em seu site ou aplicativo.
Lembre-se de que, embora o exemplo apresentado neste artigo seja simples, você pode personalizar e estilizar o elemento personalizado de acordo com as necessidades específicas do seu projeto.
Com um pouco de criatividade e conhecimento de JavaScript, você pode criar soluções inovadoras e envolventes para melhorar a interação dos usuários com campos de arquivo e outros elementos do formulário.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
O que é o .click() no JavaScript?
Antes de sair codando, bora entender a peça central desse truque
O .click() é um método que existe nos elementos do DOM
Quando você chama ele, o navegador dispara o mesmo evento de click que dispararia se o usuário tivesse clicado ali com o dedo dele
É um clique fantasma, feito por código 👻
document.getElementById("arquivo").click();Essa linha é justamente o que aciona o input de arquivo que está escondido
E ela raramente vive sozinha: o normal é ela morar DENTRO de outro evento, tipo o click do seu botão bonito (é exatamente o que a gente monta no passo a passo abaixo)
Se liga que isso não é exclusividade de input de arquivo
Qualquer elemento do DOM aceita .click(), e os listeners registrados naquele elemento rodam igualzinho como se o clique fosse humano
Ou seja: o mesmo .click() do JS que você usa pra abrir a janela de arquivo serve pra disparar botão, checkbox e por aí vai
Tome cuidado: o erro quando o usuário cancela a seleção
Roda o código acima, clica no botão e fecha a janela sem escolher nada
O console vai reclamar que não conseguiu ler uma propriedade de algo indefinido
A correção é uma linha de guarda antes de usar o arquivo:
document.getElementById("arquivo").addEventListener("change", function (event) {
if (!event.target.files.length) return;
document.getElementById("botaoArquivo").textContent = nomeArquivo;
});Pequeno, né? Mas é o tipo de detalhe que separa o exemplo de tutorial do código que vai pra produção 🙂
E se eu quiser aceitar mais de um arquivo?
Dá pra liberar a seleção múltipla direto no HTML, sem mudar uma vírgula da lógica do .click():
<input type="file" id="arquivo" multiple style="display:none;">O botão personalizado continua igual, o .click() continua igual
document.getElementById("arquivo").addEventListener("change", function (event) {
const arquivos = event.target.files;
if (!arquivos.length) return;
const nomes = Array.from(arquivos).map(function (arquivo) {
return arquivo.name;
});
document.getElementById("botaoArquivo").textContent = nomes.join(", ");
});Repara no Array.from: a files não é um array de verdade, é uma lista do DOM
Então a gente converte antes de sair usando map, senão o JavaScript reclama
Perguntas frequentes sobre .click() no JavaScript
O que faz o .click() no JavaScript?
Ele dispara o evento de click no elemento por código, sem o usuário precisar clicar
Todos os listeners de click daquele elemento rodam como se o clique tivesse sido de verdade
Preciso de alguma biblioteca pra usar o .click()?
Não, é JavaScript puro do DOM
Nada de jQuery, nada de instalar coisa: pega o elemento e chama o método
Por que o meu .click() não funciona?
Os dois motivos mais comuns são bem bobos (e todo mundo já caiu neles)
O primeiro é id errado ou trocado, aí o getElementById devolve null e o script morre naquela linha
O segundo é o script rodar ANTES do elemento existir na página, tipo <script> lá no <head>
Solução: deixe o script no fim do <body>, como fizemos no exemplo completo
Dá pra usar essa técnica com um input de arquivo escondido com CSS?
Dá sim, é exatamente o que o artigo faz com display:none
O input segue no DOM, então ele continua respondendo ao .click() e ao change normalmente
Leia também
Formações
Formação SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
