How to manage file metadata using the Browser.js SDK - Object Storage Service

Objects stored in Object Storage Service (OSS) consist of keys, data, and object metadata. Object metadata describes the object and includes standard HTTP headers and user metadata. You can use standard HTTP headers to specify HTTP request policies for an object, such as caching policies and forced download policies. You can also configure user metadata for an object to specify its purpose or attributes.

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 shows how to specify metadata when you upload a file, and how to update and view the file metadata after the file is uploaded.

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

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

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

    const upload = document.getElementById('upload')
    const update = document.getElementById('update')
    const check = document.getElementById('check')

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

    // Upload the file.
    upload.addEventListener('click', () => {
     client.put(fileName, file, {
        // Specify custom metadata. A file can have multiple metadata entries, but the total size cannot exceed 8 KB.
        meta: {
          year: 2020,
          people: 'eliot'
        }
      }).then(r => console.log(r))
    })

    // Update the metadata.
    update.addEventListener('click', () => {
      client.putMeta(fileName, {
        year: 2021,
        people: 'evan'
      }
      ).then(r => {
        console.log(r)
      })
    })
    // View the metadata.
    check.addEventListener('click', () => {
      // Based on the metadata configured in the preceding code, add x-oss-meta-year to the ExposeHeaders configuration item in the cross-origin rule of the bucket. Otherwise, the meta printed to the console is null.
      client.head(fileName).then(m => console.log(m))
    })

  </script>
</body>

</html>

References

For the complete sample code for managing file metadata, see the GitHub example.
For more information about the API operation for setting or modifying file metadata when you upload a file, see PutObject.
For more information about the API operation for viewing file metadata, see HeadObject.