Como resetar o input file com JavaScript

Neste artigo você vai aprender a como resetar o input file com JavaScript, utilizando apenas uma linha de código!

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

Para removermos o item que está no campo de file com JS vamos precisar primeiramente selecionar o elemento

Podemos fazer isso com métodos com querySelector

Após a seleção vamos atribuir um valor de vazio a propriedade value, que é onde os valores de todos os input estão

Isso é o suficiente para resolver nosso problema!

Veja um exemplo de código do que foi explicado acima:

const fileInput = document.querySelector("#image")

fileInput.value = ""

Na primeira linha temos a seleção do elemento, que no neste caso tem um id de image

Então você precisa alterar para o que corresponde ao seu elemento

Depois resetamos o valor atribuindo uma string vazia, e isso faz com o que o file input fique em branco!

Conclusão

Neste artigo você aprendeu a resetar o input file com JavaScript

Realizamos isso com apenas uma linha, após o elemento selecionado

É necessário apenas limpar a propriedade value do elemento

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologiasO link acima contém um cupom de desconto para os cursos!

<h2>Por que o input file é diferente dos outros inputs?</h2> <p>Antes do código, vale entender o porquê, beleza?</p> <p>Num input de texto você escreve o que quiser no <code>value</code> via JavaScript</p> <p>No input file não rola: o navegador não deixa um script apontar um arquivo do computador do usuário por conta própria, seria um prato cheio pra roubar arquivo de quem só entrou no site</p> <p>Ou seja, escrever um caminho ali dentro é bloqueado</p> <p>Mas LIMPAR é permitido, porque limpar não expõe nada de ninguém</p> <p>É exatamente por isso que a solução é atribuir uma string vazia, e não tentar montar um valor novo 🙂</p>

<h2>Como conferir se o input ficou realmente vazio:</h2> <p>Dá pra confiar, mas conferir é melhor</p> <p>Todo input file guarda os arquivos escolhidos numa lista, a propriedade <code>files</code></p> <p>Então é só olhar o tamanho dessa lista depois do reset:</p> <pre><code>const fileInput = document.querySelector("#image")

fileInput.value = ""

console.log(fileInput.files.length) // 0</code></pre> <p>Se voltar 0, o campo está limpo de verdade e o formulário não vai enviar arquivo nenhum</p> <p>Tome cuidado com um detalhe: limpar o input NÃO limpa o preview que você desenhou na tela</p> <p>Se você mostrou a imagem escolhida em algum lugar, limpe esse pedaço na mão também:</p> <pre><code>const preview = document.querySelector("#preview")

fileInput.value = "" preview.src = ""</code></pre>

<h2>Por que o change não dispara ao escolher o mesmo arquivo de novo?</h2> <p>Esse aqui pega MUITA gente e quase ninguém liga um ponto no outro</p> <p>O usuário seleciona a foto, dá erro no upload, ele seleciona a MESMA foto de novo e o seu código simplesmente não roda</p> <p>Motivo: o valor do campo não mudou, então o navegador entende que não teve mudança nenhuma pra avisar</p> <p>A cura é a mesma linha deste artigo, só que no lugar certo: limpe o value assim que terminar de usar o arquivo</p> <pre><code>const fileInput = document.querySelector("#image")

fileInput.addEventListener("change", (e) =&gt; {

if (!arquivo) return

enviarArquivo(arquivo)

e.target.value = "" })</code></pre> <p>Guarde o arquivo numa variável ANTES de limpar, senão você reseta e fica sem nada na mão haha</p> <p>Com o campo zerado, a próxima seleção sempre conta como mudança e o evento dispara de novo</p>

<h2>Como limpar vários inputs de uma vez:</h2> <p>Se o seu form tem três, quatro campos de arquivo, sair selecionando um por um é trabalho de mais</p> <p>Dá pra pegar todos de uma vez:</p> input.value = "" })</code></pre> <p>E se a ideia é zerar o formulário inteiro, campos de texto e seleção junto, existe um atalho ainda mais curto:</p> <pre><code>document.querySelector("#meu-form").reset()</code></pre> <p>O <code>reset</code> devolve o formulário ao estado inicial dele, e o input file entra nessa faxina</p> <p>Escolha pelo objetivo: quer limpar SÓ o arquivo, vai de value vazio, quer limpar tudo, vai de reset 😀</p>

<h2>E quando o input file está dentro do React?</h2> <p>Quando esse artigo nasceu, o normal era mexer direto no DOM e pronto</p> <p>Hoje boa parte dos formulários vive dentro de componente, e aí a dúvida muda de cara: "eu tenho um state, por que limpar o state não limpa o campo?"</p> <p>Porque o input file não é controlado pelo seu state, quem manda no valor dele é o navegador</p> <p>Então você precisa de uma referência pro elemento real e aplicar a mesma linha de sempre:</p> <pre><code>import { useRef } from "react"

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

function limpar() { inputRef.current.value = "" }

return ( &lt;&gt; &lt;input type="file" ref={inputRef} /&gt; &lt;button onClick={limpar}&gt;Limpar&lt;/button&gt; &lt;/&gt; ) }</code></pre> <p>Mudou a embalagem, a solução continua sendo a mesma string vazia</p> <p>Se liga que é sempre no elemento de verdade, nunca no state</p>

<h2>Aqueles truques antigos de recriar o input ainda são necessários?</h2> <p>Pesquisando esse problema você vai esbarrar em soluções bem mais barulhentas</p> <p>Trocar o type do campo pra texto e voltar, clonar o elemento e substituir o original, apagar o campo e criar outro do zero</p> <p>Elas existem porque vieram de uma época em que a manipulação de arquivos no navegador era muito mais travada</p> <p>O problema é que todo truque desses cobra um preço: você perde os eventos que estavam ligados ao campo antigo, perde as classes de estilo e ainda arrisca quebrar a referência que outro pedaço do código guardava</p> <p>Se uma linha resolve, não vale trocar o elemento inteiro de lugar</p> <p>Comece sempre pelo value vazio e só complique se algo específico do seu projeto pedir</p>