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

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.

Então é feito um cálculo de regra de três para definir a percentagem que já foi carregada no servidor. A variável progress armazena esses valores conforme a função onUploadProgress é executada automaticamente.

Como estamos lidando com uma Promises, no final da execução o método Then é executado e conseguimos informar que o arquivo já foi enviado.

Se houver algum erro, o método Catch é executado, assim podemos imprimir no log o erro.

Até aqui entendemos a lógica de como funciona o progresso do envio de arquivos.

No código abaixo vamos explorar um pouco mais sobre o assunto, mostrando um trecho de código que foi utilizado no exemplo de caso de uso.

Nesse código, o evento de onUploadedFile é executado seguindo a mesma lógica que explicamos anteriormente, o progresso será calculado e a função updateFile é chamada a cada update do evento, recebendo o id do arquivo enviado ao servidor e o progresso.

A função updateFile irá alterar o estado do arquivo em questão, passando o valor atual do progresso que irá refletir na tela com um Loading de progresso usando a lib react-circular-progressbar. Conforme vimos no vídeo do caso de uso acima.

Quando é finalizado o upload do arquivo, o método then é executado e invoca a função updateFile, passando o id fake do arquivo e um objeto que tem o id que o servidor gerou e a URL do arquivo que já foi salva no S3 da AWS.

Na tela vai aparecer um link excluir e um ícone representará que o arquivo foi enviado com sucesso!

Algum erro pode acontecer na execução, o servidor não permite arquivos maiores que 2 MB.

Se o usuário enviar um arquivo maior que o limite estabelecido no servidor, o método catch será executado. Então iremos alterar o estado do uploadedFile com um error: true que irá alterar o ícone no front end, indicando que o arquivo que está no preview não foi enviado por algum motivo — poderíamos colocar um tooltip para mostrar o log do erro no componente ;)

E temos aqui o resultado esperado:

Conclusão

Objetivo foi mostrar essa funcionalidade bacana do Axios de ouvir o evento de envio de arquivos e mostrar a quantidade em percentual do processamento do envio, com isso podemos mostrar um loading bem legal.

Conseguimos melhorar a experiência do usuário mostrando o progresso do envio arquivo.

O objetivo não foi mostrar o fluxo completo do front end, isso vai ficar para um próximo post. Mas para não te deixar na curiosidade, indiquei um vídeo logo abaixo que é para você aprender toda a lógica dessa implementação!

Links

Conhecendo o Axios

Criando um Back End em Node.js para envio de arquivos no S3 da AWS

Se você quer aprender a fazer o upload completo de arquivos em Front End e implementar a funcionalidade de progresso de envio de arquivos, acompanhe esse vídeo:

Observação: esse vídeo é antigo, usando React com classes. Mas vale a pena acompanhar a lógica para implementar esse tipo de funcionalidade, talvez você possa refatorar o projeto para React Hooks ;)