Neste artigo você vai aprender a como fazer upload com Fetch, vamos utilizar uma abordagem simples e fácil
Fala programador(a), beleza? Bora aprender mais sobre Fetch API!
O Fetch API é uma maneira fácil e moderna de fazer requisições HTTP no JavaScript. Uma das funcionalidades que ele oferece é a possibilidade de fazer upload de arquivos, o que pode ser útil em aplicações web que precisam enviar arquivos para um servidor. Neste artigo, vamos ver como fazer isso.
Para começar, vamos criar um formulário HTML simples com um campo de arquivo e um botão de envio.
<form> <input type="file" id="fileInput"> <button type="submit">Upload</button> </form>
Em seguida, vamos usar o Fetch API para enviar o arquivo selecionado pelo usuário para o servidor.
Primeiro, precisamos adicionar um evento de clique ao botão de envio para que possamos interceptar o clique e evitar que o formulário seja enviado de forma tradicional.
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
});
Então precisamos pegar o arquivo selecionado pelo usuário e criar um objeto FormData para armazená-lo.
const fileInput = document.querySelector('#fileInput');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
Feito isso, podemos usar o método fetch() para enviar o arquivo para o servidor. Neste exemplo, vamos enviar o arquivo para uma URL específica.
fetch('/upload', {
method: 'POST',
body: formData
})
.then((response) => {
console.log(response);
});
Além disso, é possível adicionar o cabeçalos e também tratar o erro no caso de algo dê errado.
fetch('/upload', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
body: formData
})
.then((response) => {
if (!response.ok) {
throw new Error('Falhou!');
}
console.log('Sucesso no upload!');
})
.catch((error) => {
console.error(error);
});
E é isso! Agora você sabe como fazer upload de arquivos usando o Fetch API.
Lembre-se de que este é apenas um exemplo básico e pode ser necessário fazer ajustes de acordo com as necessidades específicas de sua aplicação.
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
Em conclusão, o Fetch API é uma maneira fácil e moderna de fazer requisições HTTP no JavaScript, incluindo o upload de arquivos.
Neste artigo, mostramos como criar um formulário HTML simples, pegar o arquivo selecionado pelo usuário e enviá-lo para o servidor usando o método fetch().
Além disso, mostramos como adicionar cabeçalhos e tratar erros.
É importante lembrar que esse é apenas um exemplo básico e é possível que sua aplicação precise de ajustes adicionais para se adequar às suas necessidades específicas.
Mas agora você tem uma boa base para começar a usar o Fetch API e fazer upload de arquivos em sua aplicação web.
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!