Obtendo o status de progresso do envio de dados com Axios

 

Introdução

Vamos mostrar na prática como obter o progresso de cada requisição HTTP sendo feita através do método POST, do front end para o back end utilizando o Axios.

Caso de uso

Imagine que você tem um app front end que faz upload de arquivos para um servidor. Você quer acompanhar e mostrar ao usuário o progresso do envio desses arquivos, como no exemplo abaixo:

Isso é possível e fácil de implementar utilizando o Axios.

Vamos como codar essa funcionalidade.

Mensurando o Progresso de Upload na Prática

Sintaxe básica:

	   // Utilizando axios
	   import axios from axios;

	   // Criando um FormData que armazena a imagem (arquivo)
	   const data = new FormData();
	   data.append("file", file, filename);
  
	   // Fazendo a requisição para o servidor com método POST
	   // Enviando o arquivo que está na variável data
	   // Passando um objeto de configuração que possui um método onUploadProgress
      axios
        .post("https://my.server.com/posts", data, {
          onUploadProgress: (event) => {
            let progress: number = Math.round(
              (event.loaded * 100) / event.total
            );

            console.log(
              `A imagem ${filename} está ${progress}% carregada... `
            );  
          },
        })
        .then((response) => {
          console.log(
            `A imagem ${filename} já foi enviada para o servidor!`
          );    
        })
        .catch((err) => {
          console.error(
            `Houve um problema ao realizar o upload da imagem ${filename} no servidor AWS`
          );
          console.log(err); 
        });

Basicamente é realizado uma requisição do tipo POST utilizando o Axios, passando a variável data, com o arquivo. Passamos também um objeto com a configuração da requisição. Nele contém o método onUploadProgress que recebe um event, esse event contém as propriedades loaded e total.

loaded é o quanto já foi carregado e total armazena o tamanho total do arquivo.