Progress bar for multiple file uploads using AWS JavaScript SDK

I have successfully uploaded my files to s3, but now I want to track the progress of each file being loaded.

bucket.upload(params, function(err, data){
   console.log("File Uploaded Successfully");
}).on('httpUploadProgress', function(progress){
   console.log(progress.loaded / progress.total * 100);}

The issue with the current code is that the progress data returned does not specify which file it is for.

Is there a way to determine if the returned progress is associated with a specific file?

javascriptamazon-web-servicesamazon-s3

Answer №1

If you're facing a similar problem, there's no need to resort to hacking the code. Instead, you can simply utilize the this keyword in the upload progress callback function.

s3.upload(params, function (err, data) {
    ...
}).on('httpUploadProgress', function(progress) {
    // By accessing `this.body`, you can determine which specific file this event pertains to and use that information to calculate overall progress.
});

I have raised an issue on the AWS SDK JS repository, so hopefully a more effective solution will emerge in due course.

Answer №3

It's working perfectly for me.

S3.load(parameters, settings, function (error, info) {
          if (error) {
            reject("Oops, an error occurred");
          }
          alert("Upload Successful!");
        }).on("httpTransferProgress", (progress) => {
          let percentageUploaded = parseInt((progress.loaded * 100) / progress.total);
          this.setState({
            progress: percentageUploaded,
            uploadText: "Currently Uploading...",
            isUploading: true,
          });
        });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Xcode: Integrating and building with external framework

To Summarize After encountering difficulties compiling and linking my C++ iOS code with the Amazon AWS SDK, I found that modifying the structure of the AWS framework directory was the solution. Now I am trying to figure out what I did wrong initially. El ...

c++iosxcodelinkeramazon-web-services

Can a JavaScript file be imported exclusively for a Vue component?

When attempting to utilize the table component in the vue-ant framework, I am facing an issue. I am only looking to import the table style, but when I try to import the table style using import 'ant-design-vue/lib/table/style/css', it affects all ...

javascriptvue.js

Angular2: Dynamically switch between selected checkboxes in a list

Is there a way to toggle a checked checkbox list in Angular2? I am trying to create a button that, when pressed while the full list is visible, will display only the checked items. Pressing the button again would show the entire list. Here's the Plu ...

javascripthtmlangular

Best practices for setting up node.js on AWS with Chef

After conducting extensive research, I have come up short in finding a satisfying solution. Our environment is utilizing chef 11. Here is the code snippet I am currently working with. Please note that my expertise in using chef is very limited, so I suspe ...

node.jsamazon-web-servicesubuntuchef-infra

Experiencing issues while trying to initialize with the given function

Below is the function I am using in a JS file to initialize other parameters: $(document).bind("ready", initialize); When refreshing a page or visiting it for the first time, this function works well. However, if there is an ajax call on the page, the do ...

javascriptajaxfunction

Is there a more efficient method in ThreeJS to generate and display a lush woodland filled with unique trees?

I am facing the challenge of rendering a vast forest comprised of over 100,000 simplistic trees in ThreeJS. It is not feasible to create individual meshes for each tree. Currently, I am using GeometryUtils.merge to combine the trees into one large geometry ...

javascriptthree.js

Classic design of the shadow element

I have main.js and index.html below class CustomTagA extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({mode: 'open'}); const wrapper = document.createElement('h1'); ...

javascripthtmlcssshadow-dom

Tips on obtaining standardized values for an array with ng-repeat

My goal is to retrieve the normalized value of an array associated with different groups without altering the original array items. Instead, I am creating new objects for each group's normalized items. http://jsfiddle.net/k5Dvj/5/ $scope.nomalizedIt ...

javascriptangularjsangularjs-ng-repeat

How can I remove or bypass the notification asking 'Are you sure you want to exit this website?'

Currently, on my website I have a form that appears in a pop-up after an AJAX call. The form is created using the form_for tag from RoR. Even if I do not make any changes to the form and attempt to navigate to another page, Chrome displays an alert. https ...

javascriptjqueryruby-on-railsajax

Load an XML file from the local server asynchronously on the Chrome web browser

Attempting to load a local XML/XSL file into a variable for editing seems to be causing an issue. The code provided functions properly in IE and Chrome, however, Chrome displays a warning due to the synchronous nature of the call. function loadXMLDoc(fileN ...

javascriptajaxxmlxslt

Accessing values from both nested and non-nested JSON objects in Node.js

When calling the function below with both json and a key, I am trying to retrieve the corresponding value. The key can be in the format of abc.cde.def or simply fgh. If the keys include a ., then it signifies a nested structure within the json and values ...

javascriptjsonnode.js

Customize hoverIntent to support touch events on mobile devices

Hello everyone. I've encountered an issue with hoverintent.js, a jQuery plugin that handles mouseOver events differently than usual. I am facing constraints where I can only modify the JavaScript of this plugin, but I need it to be compatible with to ...

javascriptjquerymouseeventmouseoverhoverintent

What is the best approach to slowly transition a value to a different one over a set period of time?

if(!isWalking) { isWalking = true; var animation = setInterval(function () {$player.css({'left': "+="+boxSize/25})}, 10); setTimeout(function(){clearInterval(animation)},250); setTimeout(function(){isWalking = false},250); ...

javascriptjquery

Successive Alerts with Material-UI and React-Redux

After realizing that having multiple snackbars scattered across different components was messy, I decided to revamp my app by creating a single custom component that can be called using Redux to display any type of snackbar needed. Desired outcome: I exp ...

javascriptreactjsreact-reduxmaterial-uireact-functional-component

Navigating through items and organizing based on several criteria

In JavaScript, I am currently learning about accessing objects and sorting them based on multiple conditions. As a beginner in JavaScript, this may seem like a very basic question to some. My task involves sorting based on the 'status' field. va ...

javascript

The div is unable to display data retrieved from the php file using Ajax

This is the function utilizing ajax $(document).ready(function() { $('#submit').click(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'searchphp.php&apo ...

javascriptphpjqueryajax

Is there a way for me to obtain the present value of the chosen button in the list below?

I am working with a group of three buttons labeled English, Hindi, and Urdu. How can I retrieve the value of the selected button in a JavaScript function? <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...

javascripthtmlcss

What is the best way to insert an array of objects within another object?

Having trouble with JavaScript arrays, specifically copyCommands. I need to insert another array of items into the parent object called autoGenData. //autoGenData is the main object and copyCommands is an array autoGenData.copyCommands.push({ ...

javascriptarrays

Web API - Unable to retrieve resource: the server returned a status code of 404

Currently, I am working on an AngularJS project with Web API integration. One of the controllers I have is called Controller/MasterController, and this is configured in my WebApi Config: HttpConfiguration config = new HttpConfiguration(); config.Routes.M ...

javascriptangularjsasp.net-web-api

Guide on how to bypass IDM when downloading a PDF file through a GET request

When I try to fetch a PDF by sending a GET request to the server and open it in a new tab, IDM interrupts my request and downloads the file instead. It changes the server response status to 204 and removes the headers. How can I prevent IDM from doing th ...

javascriptexpressaxiosidm