Como Fazer Upload De Arquivos Pelo React

Quando desenvolvemos formulários em nossos sistemas, as vezes nos deparamos com situações em que precisamos fazer anexos de arquivos.

Dessa forma, devemos criar um input type=file e permitir que o nosso usuário consiga subir o que tiver que subir!

Mas como podemos fazer isso, no React?

Primeiramente, vamos criar no input:

<div>
  <label className="form-label">File</label>
  <input type="file" accept="application/pdf" />
</div>

Feito isso, devemos agora criar a nossa função que vai detectar quando adicionarmos algum arquivo:

// Usamos hooks para controlar o estado
const [cardFile, setCardFile] = useState();

const handleUploadFile = (e: any) => setCardFile(e.target.files[0]);

<div>
  <label className="form-label">File</label>
  <input type="file" onChange={handleUploadFile} accept="application/pdf" />
</div>;

Perfeito! Agora temos o arquivo em nossas mãos, podemos enviar para o nosso back-end!

Vamos agora trabalhar com FormData, que é uma forma de construirmos facilmente um conjunto de pares de chave/valor.

const addNewCard = async () => {
  setSaving(true);
  const data = new FormData();
  data.append("card", cardFile);

  // ...
  // Inserimos aqui nossa chamada POST/PUT
  // para enviarmos nosso arquivo.
};

Dessa forma, conseguimos enviar arquivos pelo nosso front para o back!

Caso você precise validar um tipo de extensão específica, neste post demonstrei como podemos fazer isso também pelo HTML!