How to provide upload callbacks to the application server when local files are uploaded to OSS - Object Storage Service

To configure an upload callback, you need to only add the required callback parameters to the upload request that is sent to Object Storage Service (OSS).

Usage notes

When you use packaging tools such as Webpack and Browserify, install OSS SDK for Browser.js by running the npm install ali-oss command.
If you want to access an OSS bucket from a browser but no CORS rules are configured for the bucket, the browser rejects the request. Therefore, you must configure CORS rules for a bucket if you want to access the bucket from a browser. For more information, see Installation.
In most cases, OSS SDK for Browser.js is used in browsers. To prevent your AccessKey pair from being exposed, we recommend that you use temporary access credentials obtained from Security Token Service (STS) to access OSS.
The temporary access credentials consist of an AccessKey pair and a security token. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. For more information about how to obtain temporary access credentials, see Use STS for temporary access authorization.

Examples

The following sample code provides an example on how to configure an upload callback:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>

<body>
  <button id='submit'>Upload Callbacks</button>
    <!-- Import the SDK file -->
  <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"></script>
  <script type="text/javascript">
    const client = new OSS({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Specify the temporary AccessKey pair obtained from Security Token Service (STS). The AccessKey pair consists of an AccessKey ID and an AccessKey secret. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // Specify the security token obtained from STS. 
      stsToken: 'yourSecurityToken',
      // Specify the name of the bucket. Example: examplebucket. 
      bucket: "examplebucket",
    });

    const options = {
      callback: {
        // Specify the public endpoint of the server that receives the callback request. 
        url: 'http://examplebucket.aliyuncs.com:23450',
        // Specify the Host field included in the callback request header. 
        // host: 'yourHost',
        // Specify the body field included in the callback request. 
        body: 'bucket=${bucket}&object=${object}&etag=${etag}&size=${size}&mimeType=${mimeType}&imageInfo.height=${imageInfo.height}&imageInfo.width=${imageInfo.width}&imageInfo.format=${imageInfo.format}&var1=${x:var1}&var2=${x:var2}',
        // Specify the Content-Type field in the callback request. 
        // contentType: 'application/x-www-form-urlencoded',
        // Configure the custom parameters for the callback request. 
        customValue: {
          var1: 'value1',
          var2: 'value2'
        }
      }
    }
    // Query DOM. 
    const submit = document.getElementById('submit')
    // Implement the upload callback. 
    submit.addEventListener('click', () => {
      client.put('example.txt', new Blob(['Hello World']), options).then(r => console.log(r))
    })


  </script>
</body>

</html>

References

For more information about the API operation that you can call to configure upload callbacks, see Callback.