Updated on 2026-01-16 GMT+08:00

Obtaining Upload Progresses

You can set the callback function to obtain upload progress.

This example uploads a file to bucket bucketname as object objectname and uses ProgressCallback to monitor the upload progress.

The example code is as follows:

// Create an instance of ObsClient. 
var obsClient = new ObsClient({
    // Hard-coded or plaintext AK/SK are risky. For security purposes, encrypt your AK/SK and store them in the configuration file or environment variables. In this example, the AK/SK are stored in environment variables for identity authentication. Before running this example, configure environment variables AccessKeyID and SecretAccessKey.
    // The front-end code does not have the process environment variable, so you need to use a module bundler like webpack to define the process variable.
    // Obtain an AK/SK pair on the management console.
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    server: 'https://your-endpoint'
});

var callback = function(transferredAmount, totalAmount, totalSeconds){
    // Obtain the average upload rate (KB/s).
    console.log(transferredAmount * 1.0 / totalSeconds / 1024);
    // Obtain the upload progress in percentage.
    console.log(transferredAmount * 100.0 / totalAmount);
};

obsClient.putObject({
       Bucket: 'bucketname',
       Key: 'objectname',
       SourceFile: document.getElementById('input-file').files[0],
       ProgressCallback: callback 
}, function (err, result) {
       if(err){
              console.error('Error-->' + err);
       }else{
              console.log('Status-->' + result.CommonMsg.Status);
       }
});
  • You can query the upload progress when uploading an object in text-based, file-based, multipart, appendable, or resumable mode.