Como Enviar um Arquivo Para o Servidor

Existem várias maneiras de enviar um arquivo para o servidor. O jeito mais comum é criar um form com um input do tipo file.

Porém essa técnica não é a mais indicada caso o seu software seja um SPA (Single Page Application), uma vez que ela provoca uma atualização da página.

Então, qual é a melhor solução para este caso?

Existem várias alternativas, mas eu gosto muito de utilizar a função fetch para enviar arquivo ao servidor. Lembrando que esta técnica não atualiza a página, pois utiliza Ajax (XHR).

Então vamos ao que interessa.

React.js no Front-end

Antes de continuar vale lembrar que você precisa um projeto React.js já criado e configurado.

Neste projeto insira o seguinte código:

import { useRef } from 'react';

function App() {
  const filesElement = useRef(null);

  const sendFile = async () => {
    const dataForm = new FormData();
    for (const file of filesElement.current.files) {
      dataForm.append('file', file);
    }
    const res = await fetch(`http://localhost:8080/upload`, {
      method: 'POST',
      body: dataForm,
    });
    const data = await res.json();
    console.log(data);
  };

  return (
    <div>
      <input type="file" multiple ref={filesElement} />
      <button onClick={sendFile}>Send file</button>
    </div>
  );
}

export default App;

Veja que é um código muito simples. Primeiro ponto a destacar é que estamos utilizando a função useRef para termos acesso ao objeto DOM do input file.

Para mais dados sobre esta função clique aqui para acessar a documentação oficial.

Em seguida, quero destacar o uso do objeto FormData. Basicamente este objeto fornece a estrutura de um formulário com chave e valor, semelhante ao que um elemento form forneceria.

Desta forma, criamos um objeto FormData passando os arquivos selecionados no input file e, por fim, enviaremos este objeto ao servidor com a função Fetch.

Node.js no Back-end

Para receber este arquivo no back-end vamos utilizar um projeto com Node.js. Então instale estas bibliotecas no seu projeto:

npm install express
npm install cors
npm install multer

Vou explicar brevemente a função de cada biblioteca instalada acima:

• express.js: Será o nosso servidor HTTP.
• cors: É um middleware para express.js que possibilita receber requisições de diferentes domínios.
• multer: É um middleware para express.js que facilita receber arquivos binários nas requisições.

Agora configure o seu projeto com Node.js desta maneira:

const express = require('express');
const cors = require('cors');
const multer = require('multer');

const app = express();

app.use(cors();

const upload = multer({
  dest: './uploads/',
});

app.post('/upload', upload.array('file'), async (req, res) => {
  console.log(`Files received: ${req.files.length}`);
  res.send({
    upload: true,
    files: req.files,
  });
});

app.listen(8080, () => {
  console.log('App running on http://localhost:8080');
});

Veja que o código do back-end também é muito simples. Primeiramente configuramos um servidor HTTP com express.js.

Posteriormente, criamos a rota /uploads para receber os arquivos. Mas veja que configuramos esta rota com ajuda da biblioteca Multer que criará os arquivos dentro pasta /uploads/ e injeta a variável req.files com os metadados dos arquivos recebidos.

Por fim

Neste tutorial eu utilizei as bibliotecas nas seguintes versões:

• React.js: 17.0
• Node.js: 12.18
• Express.js: 4.17
• Cors: 2.8
• Multer: 1.4

Dúvidas ou sugestões é só entrar em contato. Abraço.