Como limpar input de arquivo com JavaScript

Neste artigo você vai aprender a como limpar input de arquivo com JavaScript, vamos utilizar um código simples e fácil de entender

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Limpar input de arquivo com JavaScript é uma tarefa importante e comum em programação de páginas web.

Em muitos casos, quando um usuário seleciona um arquivo para upload, é necessário permitir que ele limpe a seleção de arquivo antes do envio.

Neste artigo, vamos explorar como limpar input de arquivo com JavaScript.

A primeira maneira de limpar input de arquivo com JavaScript é atribuir o valor vazio ao elemento do input.

Aqui está um exemplo:

const inputArquivo = document.querySelector('#inputArquivo');
inputArquivo.value = '';

Neste exemplo, selecionamos o elemento do input usando o método querySelector() e, em seguida, atribuímos o valor vazio ao elemento do input.

Isso limpará a seleção de arquivo e permitirá que o usuário selecione outro arquivo para upload.

Outra maneira de limpar input de arquivo com JavaScript é recriar o elemento do input. Aqui está um exemplo:

const inputArquivo = document.querySelector('#inputArquivo');
const novoInput = document.createElement('input');
novoInput.type = 'file';
novoInput.id = 'inputArquivo';
novoInput.name = 'inputArquivo';
inputArquivo.parentNode.replaceChild(novoInput, inputArquivo);

Neste exemplo, selecionamos o elemento do input usando o método querySelector() e, em seguida, criamos um novo elemento do input usando o construtor createElement().

A seguir, definimos os atributos do novo elemento do input e, finalmente, substituímos o elemento original pelo novo elemento do input.

Também é possível usar o método reset() do formulário para limpar o input de arquivo. Aqui está um exemplo:

const formulario = document.querySelector('#formulario');
formulario.reset();

Em resumo, removar o valor do input de arquivo com JavaScript pode ser realizado de várias maneiras, como atribuir o valor vazio ao elemento do input, recriar o elemento do input ou usar o método reset() do formulário.

Escolha a abordagem que melhor se adapta às necessidades do seu projeto e utilize-a para fornecer uma experiência de usuário mais eficiente e intuitiva.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Limpar input tipo file com JavaScript é uma tarefa importante para melhorar a experiência do usuário em páginas web interativas.

Neste artigo, exploramos várias maneiras de limpar input de arquivo com JavaScript.

Cada abordagem tem suas próprias vantagens e desvantagens, portanto, é importante escolher a abordagem que melhor se adapta às necessidades do seu projeto.

Considere a complexidade do seu formulário, a necessidade de manter a consistência visual e a facilidade de manutenção do código ao escolher a abordagem a ser utilizada.

Lembrando que é importante fornecer aos usuários a opção de limpar seleções de arquivos antes de enviar o formulário, tornando a experiência de uso mais eficiente e intuitiva.

Com as várias maneiras de limpar input de arquivo com JavaScript, você pode facilmente melhorar a eficiência e a funcionalidade de suas aplicações e projetos web.

Utilize estas técnicas para aprimorar a experiência do usuário em seus projetos e facilite a seleção e envio de arquivos em formulários web.

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!

Uma dúvida que quase todo mundo tem aqui: por que só dá pra colocar valor vazio?

Se liga nisso: o navegador não deixa você definir um caminho de arquivo no value do input por questão de segurança

Imagina o estrago se qualquer site pudesse apontar pra um arquivo do seu PC sozinho, tipo os rm -rf da vida

Por isso a única atribuição que ele aceita é a string vazia, que serve justamente pra limpar

Então inputArquivo.value = ” é o jeito mais direto e funciona igual mesmo quando o input aceita vários arquivos com o atributo multiple

Ligando isso a um caso de uso real: geralmente você quer limpar quando o usuário clica num botão de ‘Limpar’

Bora ver na prática?

const inputArquivo = document.querySelector(‘#inputArquivo’); const botaoLimpar = document.querySelector(‘#botaoLimpar’);

botaoLimpar.addEventListener(‘click’, () => { inputArquivo.value = ”; });

Aqui a gente escuta o clique do botão e zera o input naquele momento

Simples e resolve a maioria dos formulários do dia a dia =)

E se você tá no React, muda um pouco a lógica, porque não é tão comum sair mexendo no DOM na mão por lá

O caminho é usar o useRef pra pegar a referência do input e zerar o value:

import { useRef } from ‘react’;

function Upload() { const inputRef = useRef(null);

const limpar = () => { inputRef.current.value = ”; };

return ( <> <input type="file" ref={inputRef} /> <button onClick={limpar}>Limpar</button> </> ); }

Mesma ideia do value vazio, só que acessando o elemento pelo ref em vez do querySelector

Perguntas frequentes

O reset() limpa só o input de arquivo?

Não, o reset() zera o formulário inteiro, todos os campos voltam ao estado inicial

Se você quer limpar SÓ o input de arquivo e manter o resto preenchido, vai de inputArquivo.value = ”

Como limpar um input que aceita vários arquivos?

Mesma coisa: mesmo com o atributo multiple, atribuir value = ” esvazia a lista inteira de arquivos selecionados

Qual método usar?

Na dúvida, o value = ” resolve na maioria dos casos, é o mais curto e direto

Recriar o elemento só vale a pena em situações específicas onde você precisa resetar listeners junto