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