All Products
Search
Document Center

Object Storage Service:Upload callback (Browser.js SDK)

Last Updated:Nov 29, 2025

To configure OSS to send a callback to your application server after a file (Object) is uploaded, you only need to include the callback parameters in your upload request.

Note

You can configure settings, such as `callbackSNI`, for a callback. For more information, see Callback.

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.

Example code

The following code provides an example of an upload callback:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="submit">Upload Callback</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({
        // Set yourRegion to the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou.
        region: "yourRegion",
        authorizationV4: true,
        // The temporary AccessKey pair (AccessKey ID and AccessKey secret) obtained from the Security Token Service (STS).
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // The security token (SecurityToken) obtained from the STS service.
        stsToken: "yourSecurityToken",
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
      });

      const options = {
        callback: {
          // The server address for the callback request. The address must be an Internet URL.
          url: "http://examplebucket.aliyuncs.com:23450",
          // The value of Host in the callback request header. This is the Host value configured on your server.
          // host: 'yourHost',
          // The value of the request body for the callback.
          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}",
          // The Content-Type of the callback request.
          // contentType: 'application/x-www-form-urlencoded',
          // Specifies whether OSS sends a Server Name Indication (SNI) to the origin URL specified by callbackUrl when the client initiates a callback request.
          callbackSNI: true,
          // The custom parameters for the callback request.
          customValue: {
            var1: "value1",
            var2: "value2",
          },
        },
      };
      // Get the DOM.
      const submit = document.getElementById("submit");
      // 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 for upload callbacks, see Callback.