Como fazer upload com Fetch API em JavaScript

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.

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

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!

Tome cuidado com o Content-Type:

Esse é o ponto que mais derruba upload com Fetch, se liga nisso

Quando o corpo da requisição é um FormData, o próprio navegador monta o cabeçalho do envio junto com o boundary, que é a marcação que separa cada campo do arquivo dentro do corpo

Se você escreve o Content-Type na mão, esse boundary não vai junto, e aí o servidor recebe um corpo que ele não consegue separar

O sintoma clássico é aquele upload que "funciona" no console mas chega vazio do outro lado, ou estoura erro de parse no backend

Então a versão mais segura é justamente a mais simples, a que a gente montou antes: passa method, passa body com o FormData e deixa o navegador cuidar do cabeçalho

fetch(‘/upload’, { method: ‘POST’, body: formData })

Já me ferrei uma vez por causa disso, e demorei pra achar hehe

A mesma coisa com async/await:

O exemplo acima usa .then, que funciona redondo

Mas hoje quase todo mundo escreve requisição com async/await, fica mais fácil de ler e de tratar erro num lugar só

Bora ver na prática?

const form = document.querySelector(‘form’); const fileInput = document.querySelector(‘#fileInput’);

form.addEventListener(‘submit’, async (event) => { event.preventDefault();

const formData = new FormData();

try { const response = await fetch(‘/upload’, { method: ‘POST’, body: formData });

if (!response.ok) { throw new Error(‘Falhou!’); }

const data = await response.json(); console.log(data); } catch (error) { console.error(error); } });

Repara numa coisa: aqui a gente não para no console.log(response)

O response é só o envelope da resposta, quem tem o conteúdo que o servidor devolveu é o response.json()

Se o seu backend responder texto puro em vez de JSON, troca por response.text() e segue o jogo

Como enviar vários arquivos de uma vez?

Pra isso o input precisa aceitar seleção múltipla

<input type="file" id="fileInput" multiple>

Aí no JavaScript você percorre a lista de arquivos e vai empilhando tudo no mesmo FormData

const formData = new FormData();

for (const file of fileInput.files) { formData.append(‘files’, file); }

fetch(‘/upload’, { method: ‘POST’, body: formData });

O nome que você passa no primeiro parâmetro do append é a chave que o servidor vai procurar

Então combina isso com o backend antes, senão o arquivo chega e ninguém acha ele haha

Validando o arquivo antes de enviar:

Antes de disparar o fetch, vale checar se tem arquivo mesmo ali

if (!fileInput.files.length) { alert(‘Selecione um arquivo!’); return; }

Dá pra ir além e olhar tipo e tamanho do arquivo antes de subir

console.log(file.name); console.log(file.type); console.log(file.size);

O type te diz o formato (image/png, application/pdf e por aí vai) e o size vem em bytes

Com isso você já barra o cara que tenta subir um vídeo de 2 horas no campo de foto de perfil =)

Só não esquece: validação no navegador é conveniência pro usuário, ela NÃO substitui a validação no servidor, porque qualquer um mexe no que roda no browser

E do lado do servidor, como fica?

Que servidor? Qualquer um que você tenha ali atrás, o Fetch é só o mensageiro

O ponto que confunde todo mundo é esse: enviar arquivo não é enviar JSON

O corpo vai como formulário multipart, então o backend precisa saber ler esse formato pra separar o arquivo dos outros campos

1) a URL do fetch precisa apontar pra rota que realmente recebe o arquivo

2) o nome usado no formData.append tem que ser exatamente o mesmo que o servidor procura

Se esses dois baterem e o cabeçalho ficar por conta do navegador, o arquivo chega inteiro do outro lado

E dá pra mandar outros dados junto do arquivo na mesma requisição, é só ir empilhando no FormData

formData.append(‘titulo’, ‘Minha foto’); formData.append(‘usuarioId’, 42);

Perguntas frequentes sobre upload com Fetch API:

Preciso definir o Content-Type na requisição?

Não, e definir na mão é justamente o que costuma quebrar o envio

Com FormData no body, o navegador monta o cabeçalho com o boundary correto sozinho

Por que meu arquivo chega vazio no servidor?

Na maioria das vezes é uma dessas três: cabeçalho escrito na mão, nome do campo no formData.append diferente do que o servidor espera, ou o preventDefault que faltou e o formulário recarregou a página antes do fetch rodar

Dá pra enviar arquivo e outros dados na mesma requisição?

Dá sim, o FormData aceita quantos campos você quiser, é só chamar append pra cada um

O fetch resolve sozinho quando o servidor devolve erro?

Não, ele só rejeita quando a requisição em si não acontece (queda de rede, por exemplo)

Se o servidor responder erro, a promise resolve normal, por isso a checagem do response.ok no exemplo acima não é frescura, beleza?