CODEWITHSUNDEEP
phpjqueryajaxamazon-s3progress
Austin Branham
Austin Branham

Reputation: 173

Progress bar during httpUploadProgress

I'm attempting to create a progress bar visible to the user for an upload that is happening with ajax. The upload is being sent to an s3 bucket. Here is my script to send the file to the bucket:

var upload = s3.upload(
  {Bucket: 'tgr-video-ingest', Key: rCreds.ObjectKey, Body: file}
);

upload.on('httpUploadProgress', function (progress) {
  var pct = Math.round(progress.loaded / progress.total * 100);
  $('#progress').html(pct + '%');
});

As of now, I'm writing the progress in a p tag, but want to display it within an html element that is animated like a loading progress bar. Is there a way to animate an element based on the upload position of the httpUploadProgress?

Upvotes: 1

Views: 627

Answers (1)

Austin Branham
Austin Branham

Reputation: 173

I've figured it out, answering my own question in hopes that it helps someone else some day.

var pct = Math.round(progress.loaded / progress.total * 100);
   $('#percentage').html(pct + '%');
   var progressBar = document.getElementsByTagName("progress")[0],
   animation = function(){
        progressBar.value = (pct);
   };
   setTimeout(function(){animation();});
   if (pct == 100) {
        $('#percentage').html('DONE');
   }

Using the progress html element, I'm assigning it a value equeal to the variable 'pct' which is the amount completed in in the httpUploadProgress. I'm doing so by using an animation function being run just once calling setTimeout.

More so, I'm replacing the percentage amount completed with the word 'DONE' when the httpUploadProgress has completed and reached 100.

Upvotes: 1

Related Questions