Browser.js append upload - Object Storage Service - Alibaba Cloud Documentation Center

An append upload adds content to the end of an existing appendable object using the AppendObject method.

Precautions

To perform an append upload using the Browser.js software development kit (SDK), you must expose the x-oss-next-append-position header in the bucket's cross-origin rules. Otherwise, the append position nextAppendPosition cannot be retrieved, and the upload fails. For more information, see Set cross-origin resource sharing.
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 Configuration examples for common scenarios.
If the object does not exist, the AppendObject operation creates a new appendable object.
If the object already exists, the following cases apply when you call the AppendObject operation:
- If the object is an appendable object and the specified append position is the same as the current length of the object, the content is appended to the end of the object.
- If the object is an appendable object but the specified append position does not match the current length of the object, the PositionNotEqualToLength exception is returned.
- If the object is not an appendable object, such as a Normal object uploaded using a simple upload, the ObjectNotAppendable exception is returned.

Permissions

By default, an Alibaba Cloud account has full permissions. RAM users or RAM roles under an Alibaba Cloud account do not have any permissions by default. The Alibaba Cloud account or account administrator must grant operation permissions through RAM Policy or Bucket policies.

API

Action

Definition

AppendObject

oss:PutObject

You can call this operation to upload an object by appending the object to an existing object.

oss:PutObjectTagging

When uploading an object by appending the object to an existing object, if you specify object tags through x-oss-tagging, this permission is required.

Examples

The following code shows how to perform an 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</button>
    <script>
      const upload = document.getElementById("upload");

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

      upload.addEventListener("click", async () => {
        const target = file.files[0];
        // Specify the full path of the object. The full path cannot contain the bucket name. Example: examplefile.txt.
        // The first append upload. The return value indicates the position for the next append operation.
        const result = await client.append("examplefile.txt", target);

        await client.append("123", result, {
          // The second append upload. The position for subsequent append operations is the length of the object (Content-Length) before the append operation.
          position: result.nextAppendPosition,
        });
      });
    </script>
  </body>
</html>

References

For the complete sample code for an append upload, see GitHub examples.
For more information about the API operation for an append upload, see AppendObject.