Monitorando Progresso de Upload de Arquivos - 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 mplementar 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