All Products
Search
Document Center

Object Storage Service:Append upload by using OSS SDK for Browser.js

Last Updated:Nov 14, 2024

You can call the AppendObject operation to append content to existing appendable objects.

Usage notes

  • If you use OSS SDK for Browser.js to perform append upload to a bucket, you must set Expose Headers to x-oss-next-append-position in the CORS rule configured for the bucket. Otherwise, nextAppendPosition cannot be obtained. As a result, the upload fails. For more information, see CORS.

  • In this topic, an OSSClient instance is created by using an OSS endpoint. If you want to create an OSSClient instance by using custom domain names or Security Token Service (STS), see Initialization.

  • In this topic, an OSSClient instance is created by using an OSS endpoint. If you want to create an OSSClient instance by using custom domain names or Security Token Service (STS), see Create an OSSClient instance.

  • To use append upload, you must have the oss:PutObject permission. For more information, see Attach a custom policy to a RAM user.

  • If the object to which you want to append content does not exist, the AppendObject operation creates an appendable object.

  • If the object to which you want to append content exists, the following situations occur when you call the AppendObject operation:

    • If the object is an appendable object and the specified position from which the append operation starts is equal to the current object size, the object is appended to the end of the object.

    • If the object is an appendable object and the specified position from which the append operation starts is not equal to the current object size, the PositionNotEqualToLength error is returned.

    • If the object is not an appendable object, the ObjectNotAppendable error is returned.

Examples

The following sample code provides an example on how to upload an object by using append upload:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.17.1.min.js"></script>
  </head>
  <body>
    <input type="file" id="file" />
    <button id="upload">Upload Object</button>
    <script>
      const upload = document.getElementById("upload");

      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',
        authorizationV4: true,
        // Specify the temporary AccessKey pair obtained from STS. 
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Specify the security token obtained from STS. 
        stsToken: 'yourSecurityToken',
        // Specify the name of the bucket. 
        bucket: 'examplebucket'
      });

      upload.addEventListener("click", async () => {
        const target = file.files[0];
        // Specify the full path of the object. Do not include the bucket name in the full path. Example: examplefile.txt. 
        // Perform the first append upload operation. The position from which the next append operation starts is included in the response. 
        const result = await client.append("examplefile.txt", target);

        await client.append("123", result, {
          // Perform the second append operation. The position from which the next append operation starts is the current length of the object, which is specified by Content-Length. 
          position: result.nextAppendPosition,
        });
      });
    </script>
  </body>
</html>

References

  • For the complete sample code that is used to perform append upload, visit GitHub.

  • For more information about the API operation that you can call to perform append upload, see AppendObject.