Monitorando Progresso de Upload de Arquivos em JavaScript

Quando lidamos com uploads de arquivos grandes utilizando a File API, é importante fornecer feedback visual ao usuário sobre o progresso da operação. O tipo FileReader oferece suporte ao evento progress, que fornece informações detalhadas através do objeto ProgressEvent. Este objeto inclui as seguintes propriedades:

lengthComputable: uma propriedade booleana que indica se é possível calcular o progresso (isto é, o número de bytes lidos em relação ao total).
loaded: número inteiro sem sinal de 64 bits que indica a quantidade de dados já carregados.
total: número inteiro sem sinal de 64 bits que representa o total de dados a serem carregados.

O exemplo a seguir demonstra como implementar essa funcionalidade:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <title>Monitoramento de Progresso</title>
    <style>
      #progress {
        width: 0;
        height: 100%;
        background-color: #ccc;
      }
      #progress-bar {
        width: 100px;
        height: 20px;
        border: 1px solid #888;
      }
    </style>
  </head>
  <body>
    <input type="file" id="files" multiple /><br /><br />
    <div id="progress-bar">
      <div id="progress"></div>
    </div>
    <script>
      const progressBar = document.getElementById("progress-bar");
      const progress = document.getElementById("progress");

      // Atualiza o progresso do upload
      function updateProgress(e) {
        if (e.lengthComputable) {
          const percentLoaded = Math.round((e.loaded / e.total) * 100);
          if (percentLoaded < 100) {
            progress.style.width = percentLoaded + "%";
            progress.textContent = percentLoaded + "%";
          }
        }
      }

      // Gerencia a seleção de arquivos
      function handleFileSelected(event) {
        progress.style.width = "0%";
        progress.textContent = "0%";

        const reader = new FileReader();
        reader.onprogress = updateProgress;
        reader.onerror = (e) => console.error("Erro ao ler o arquivo:", e.target.error);
        reader.onload = () => {
          progress.style.width = "100%";
          progress.textContent = "100%";
        };

        if (event.target.files.length > 0) {
          reader.readAsBinaryString(event.target.files[0]);
        }
      }

      document.getElementById("files").addEventListener("change", handleFileSelected);
    </script>
  </body>
</html>

Neste exemplo, o elemento <input> com o atributo type="file" permite ao usuário selecionar arquivos. Para exibir o progresso de upload, utilizamos o elemento <div id="progress-bar">, que contém <div id="progress">, representando a barra de progresso.

A função handleFileSelected é chamada sempre que o usuário seleciona um arquivo. Nela são configurados os valores iniciais do indicador de progresso:

progress.style.width = "0%";
progress.textContent = "0%";

Em seguida, criamos uma instância de FileReader para lidar com o arquivo selecionado e vinculamos os manipuladores de evento necessários.

Cálculo do Progresso

O evento progress é tratado pela função updateProgress, que calcula a porcentagem de bytes lidos em relação ao total do arquivo. Essa informação é utilizada para ajustar a largura e o texto da barra de progresso.

function updateProgress(e) {
  if (e.lengthComputable) {
    const percentLoaded = Math.round((e.loaded / e.total) * 100);
    if (percentLoaded < 100) {
      progress.style.width = percentLoaded + "%";
      progress.textContent = percentLoaded + "%";
    }
  }
}

O aumento gradual da largura do elemento progress, com um fundo cinza, serve como um indicador visual claro. O texto interno exibe a porcentagem carregada.

Quando o arquivo é carregado completamente, o evento load do FileReader é disparado. Neste ponto, o indicador de progresso é atualizado para refletir a finalização.

reader.onload = () => {
  progress.style.width = "100%";
  progress.textContent = "100%";
};

Para iniciar a leitura do arquivo como uma sequência de bytes, utilizamos o método readAsBinaryString. Caso nenhum arquivo seja selecionado, a função simplesmente não executa a leitura.

if (event.target.files.length > 0) {
  reader.readAsBinaryString(event.target.files[0]);
}

Indicador de progresso de upload de arquivo

Documentação oficial:

W3C - File API