Como obter o caminho completo até o arquivo do input file

Neste artigo você vai aprender a como obter o caminho completo até o arquivo do input file utilizando JavaScript

Fala programador(a), beleza? Bora aprender mais sobre como lidar com inputs do tipo file com JavaScript!

Se você já trabalhou com formulários HTML, provavelmente já se deparou com o elemento <input type="file">, que permite que o usuário selecione um arquivo do seu computador para enviar para o servidor.

Mas às vezes precisamos saber o caminho completo até o arquivo selecionado pelo usuário. Isso pode ser útil, por exemplo, para mostrar o nome do arquivo na tela ou para fazer algum tipo de validação antes de enviar o arquivo para o servidor.

Neste artigo, vamos ver como podemos obter o caminho completo até o arquivo do <input type="file"> usando JavaScript.

Formação Recomendada

Formação Claude Code

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

• 114 aulas
• 4 projetos
• 9h 15min

Conhecer formação

Obtendo o caminho completo com o método value

A primeira forma de obter o caminho completo até o arquivo é usando o método value do elemento <input type="file">.

Ele retorna a string com o caminho completo até o arquivo selecionado pelo usuário.

Veja o exemplo abaixo:

const input = document.getElementById('arquivo');
const caminhoCompleto = input.value;
console.log(caminhoCompleto);

Neste exemplo, primeiro selecionamos o elemento <input> usando o método getElementById(). Em seguida, basta acessar o método value para obter a string com o caminho completo.

Obtendo o caminho completo com o método files

Outra forma de obter o caminho completo até o arquivo é usando o método files do elemento <input type="file">.

Ele retorna um objeto FileList com os arquivos selecionados pelo usuário.

Veja o exemplo abaixo:

const input = document.getElementById('arquivo');
const arquivo = input.files[0];
const caminhoCompleto = arquivo.name;
console.log(caminhoCompleto);

Neste exemplo, primeiro selecionamos o elemento <input> e em seguida acessamos o primeiro elemento do objeto FileList usando o índice [0].

Em seguida, basta acessar o atributo name do objeto File para obter a string com o caminho completo.

Deixe um comentário contando o que achou deste artigo 🙂

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

Conclusão

Neste artigo você viu como obter o caminho completo até o arquivo do input file em JavaScript

Utilizamos duas abordagens diferentes, agora basta você escolher a que preferiu e aplicar no seu projeto!

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Por que aparece C:\fakepath no caminho?

Se você rodou o exemplo do value e viu algo tipo C:\fakepath\seuarquivo.png, calma, não é bug

Os navegadores escondem o caminho real do arquivo de propósito, por segurança

Imagina se qualquer site conseguisse ler a estrutura de pastas do teu PC? seria um prato cheio pra quem quer atacar o usuário

Então o que sobra pra gente é o nome do arquivo, e é com ele que dá pra trabalhar de forma confiável

Exibindo o nome do arquivo na tela

Na prática o uso mais comum é mostrar pro usuário qual arquivo ele acabou de escolher

Pra isso a gente escuta o evento change do input e atualiza a tela na hora

const input = document.getElementById(‘arquivo’); const saida = document.getElementById(‘nome-arquivo’);

input.addEventListener(‘change’, () => { if (input.files.length > 0) { } });

Toda vez que o usuário selecionar um arquivo novo, o nome aparece sozinho no elemento de saída

Bora testar? escolhe um arquivo aí e vê o nome trocar na tela

Perguntas frequentes

Dá pra pegar o caminho real completo do arquivo?

Não, e isso é proposital

O navegador bloqueia o caminho verdadeiro por segurança, você trabalha com o nome do arquivo

Qual a diferença entre value e files?

O value te devolve uma string, com aquele fakepath na frente

Já o files é um objeto com os dados de cada arquivo, bem mais útil quando você quer o nome, o tamanho ou o tipo

E se o usuário selecionar vários arquivos?

Aí é só colocar o atributo multiple no input e percorrer o files com um for, cada posição é um arquivo