How do I use OSS SDK for Brower.js to manage object metadata? - Object Storage Service

Objects that are stored in Object Storage Service (OSS) consist of keys, data, and metadata. Object metadata describes object attributes. Object metadata includes standard HTTP headers and user metadata. You can create custom HTTP request policies such as object cache policies and forced object download policies by configuring standard HTTP headers. You can configure user metadata for an object to identify the purposes or attributes of the object.

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.

Sample code

The following code provides an example on how to specify object metadata during uploads and how to update and query object metadata after uploads:

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

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

<body>
  <button id='upload'>Upload</button>
  <button id='update'> Modify Object Metadata </button>
  <button id='check'> Query Object Metadata </button>
    <!-- Import the SDK file -->
  <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.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',
       authorizationV4: true,
       // 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 upload = document.getElementById('upload')
    const update = document.getElementById('update')
    const check = document.getElementById('check')

    // Specify the content of the object to upload. 
    const file = new Blob(['examplecontent'])
    // Specify the name of the object to upload to the bucket. 
    const fileName = 'exampleobject.txt'

    // Upload the object. 
    upload.addEventListener('click', () => {
     client.put(fileName, file, {
        // Specify user metadata. You can configure multiple sets of metadata for an object. Take note that all the metadata cannot exceed 8 KB in size. 
        meta: {
          year: 2020,
          people: 'eliot'
        }
      }).then(r => console.log(r))
    })

    // Modify the object metadata. 
    update.addEventListener('click', () => {
      client.putMeta(fileName, {
        year: 2021,
        people: 'evan'
      }
      ).then(r => {
        console.log(r)
      })
    })
    // Query the object metadata. 
    check.addEventListener('click', () => {
      // Add x-oss-meta-year to the Exposed Headers field in the CORS rule of the bucket based on the preceding metadata. Otherwise, the metadata displayed in the console is null. 
      client.head(fileName).then(m => console.log(m))
    })

  </script>
</body>

</html>

References

For the complete sample code that is used to manage object metadata, visit GitHub.
For more information about the API operation that you can call to configure or modify object metadata when you upload an object, see PutObject.
For more information about the API operation that you can call to query object metadata, see HeadObject.