I want to display progress bar when i am uploading a file to aws s3 bucket using javascript

Question

i am uploading a file in chunks to aws s3 bucket and i want to display progress bar based on the percentage of file upload.

let interval = setInterval(() => {
    const uploadedProjectList = uploadProgressStatus.uploadedProjectList;

    for (let uploadProjectIndex = 0; uploadProjectIndex < uploadedProjectList.length; uploadProjectIndex++) {
        const project = uploadedProjectList[uploadProjectIndex];

        if (project.status !== 'Uploading') {
            continue;
        }

        const progressBar = document.getElementById(project.id + "_innerProgress");
        const progressBarText = document.getElementById(project.id + "_innerProgressText");

        Koolioai.Progress(fle, jbname + '.' + frmat).on('httpUploadProgress', function (progress) {
            console.log(progress);

            let progressPercentage = Math.round(progress.loaded / progress.total * 100);

            progressBar.style.width = progressPercentage + "%";
            progressBarText.textContent = progressPercentage;
            project.progress = progressPercentage;

            if (progressPercentage === 100) {
                clearInterval(interval);
                project.status = "Uploaded";
            }
        });
    }
}, 5000);
Koolioai.Progress=function(b,key){

    return new AWS.S3().upload({
    Bucket: "bucket is here",
        Key: key,
        Body: b
    }, function(err, data) {
        if (err)
        {
            console.log('There was an error uploading your file: ', err);
            return false;
        }
        console.log('Successfully uploaded file.', data);
    return true;
})

                                

i have tried the above code

Answer 1

you could try this

import { Upload } from "@aws-sdk/lib-storage";
import { S3Client, S3 } from "@aws-sdk/client-s3";

const target = { Bucket, Key, Body };
try {
  const parallelUploads3 = new Upload({
    client: new S3({}) || new S3Client({}),
    tags: [...], // optional tags
    queueSize: 4, // optional concurrency configuration
    partSize: 5MB, // optional size of each part
    leavePartsOnError: false, // optional manually handle dropped parts
    params: target,
  });

  parallelUploads3.on("httpUploadProgress", (progress) => {
    console.log(progress);
  });

  await parallelUploads3.done();
} catch (e) {
  console.log(e);
}