AWS SDK JavaScript: how display upload progress of AWS.S3.putObject?

Question

I'm developing a JavaScript client to upload files directly to Amazon S3.

<input type="file" id="file-chooser" /> 
<button id="upload-button">Upload to S3</button>
<div id="results"></div>

<script type="text/javascript">
  var bucket = new AWS.S3({params: {Bucket: 'myBucket'}});

  var fileChooser = document.getElementById('file-chooser');
  var button = document.getElementById('upload-button');
  var results = document.getElementById('results');
  button.addEventListener('click', function() {
    var file = fileChooser.files[0];
    if (file) {
      results.innerHTML = '';

      var params = {Key: file.name, ContentType: file.type, Body: file};
      bucket.putObject(params, function (err, data) {
        results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
      });
    } else {
      results.innerHTML = 'Nothing to upload.';
    }
  }, false);
</script>

The example from Amazon documentation works fine, but it doesn't provide any feedback on the upload progress.

Any ideas?

Thanks

added solution for progress bar @fkj

Avinash Dalvi
– Avinash Dalvi

2020-06-09 19:47:33 +00:00
Commented Jun 9, 2020 at 19:47 — Avinash Dalvi
– Avinash Dalvi, Commented Jun 9, 2020 at 19:47

Chris Williams · Accepted Answer · 2020-06-09 18:17:39Z

12

Rather than using the s3.PutObject function why not instead use the ManagedUpload function.

It has been specifically developed to allow you to hook into a httpUploadProgress event that should allow the updating of your progress bar to be implemented fairly easily.

answered Jun 9, 2020 at 18:17

Chris Williams

35.7k4 gold badges46 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kuldeep chopra Over a year ago

The upload function (manage upload) does not exist in @aws-sdk/client-s3; it is only available in aws-sdk. Are you aware of any alternative methods to achieve this?

Avinash Dalvi · Accepted Answer · 2021-05-11 02:30:58Z

3

I have done some customisation for file upload progress. Use this same logic in node, angular and javascript.

Here is repository link :

https://github.com/aviboy2006/aws-s3-file-upload-progress

Use this fiddle for test: https://jsfiddle.net/sga3o1h5/

Note : Update access key, bucketname and secret key.

 var bucket = new AWS.S3({
   accessKeyId: "",
   secretAccessKey: "",
   region: 'us-east-1'
 });

 uploadfile = function(fileName, file, folderName) {
   const params = {
     Bucket: "fileuploadprocess",
     Key: folderName + fileName,
     Body: file,
     ContentType: file.type
   };
   return this.bucket.upload(params, 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;
   });
 }

 uploadSampleFile = function() {
   var progressDiv = document.getElementById("myProgress");
   progressDiv.style.display="block";
   var progressBar = document.getElementById("myBar");
   file = document.getElementById("myFile").files[0];
   folderName = "Document/";
   uniqueFileName = 'SampleFile'; 
   let fileUpload = {
     id: "",
     name: file.name,
     nameUpload: uniqueFileName,
     size: file.size,
     type: "",
     timeReference: 'Unknown',
     progressStatus: 0,
     displayName: file.name,
     status: 'Uploading..',
   }
   uploadfile(uniqueFileName, file, folderName)
     .on('httpUploadProgress', function(progress) {
       let progressPercentage = Math.round(progress.loaded / progress.total * 100);
       console.log(progressPercentage);
       progressBar.style.width = progressPercentage + "%";
       if (progressPercentage < 100) {
         fileUpload.progressStatus = progressPercentage;

       } else if (progressPercentage == 100) {
         fileUpload.progressStatus = progressPercentage;

         fileUpload.status = "Uploaded";
       }
     })
 }

edited May 11, 2021 at 2:30

answered Jun 9, 2020 at 19:46

Avinash Dalvi

9,4299 gold badges34 silver badges60 bronze badges

3 Comments

Avinash Dalvi Over a year ago

Try this code. Someone has change might be code.github.com/aviboy2006/aws-s3-file-upload-progress/blob/master/…

Gracie williams Over a year ago

why do u have secret key in jsfiddle open ?

Avinash Dalvi Over a year ago

removed Jsfiddle.

Erik · Accepted Answer · 2022-03-04 14:10:32Z

I bumped into this post, then i found this AWS npm package, which does exactly what you are asking for: @aws-sdk/lib-storage

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);
}

Collectives™ on Stack Overflow

AWS SDK JavaScript: how display upload progress of AWS.S3.putObject?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related