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>
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!