Manage folders with the Browser.js SDK - Object Storage Service

Object Storage Service (OSS) uses a flat namespace — there are no real directories. To simulate a folder structure, OSS represents a folder as a zero-byte object whose key ends with a forward slash (/). All objects under that folder share the same key prefix.

Prerequisites

Before you begin, ensure that you have:

An OSS bucket with cross-origin resource sharing (CORS) rules configured. Without CORS rules, the browser blocks requests to OSS. For details, see Installation.
Temporary access credentials from Security Token Service (STS): an AccessKey ID, an AccessKey secret, and a security token. Using temporary credentials prevents your AccessKey pair from being exposed in browser code. For details, see Use STS for temporary access authorization.
OSS SDK for Browser.js installed. If you use Webpack or Browserify, run npm install ali-oss. Otherwise, load the SDK from the CDN:
```
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
```

Create a folder

Create a folder by uploading a zero-byte object with a key that ends in /. The following example creates a folder named log/ in examplebucket.

<!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.18.0.min.js"></script>
  </head>
  <body>
    <script>
      const client = OSS({
        // Set yourRegion to the region where the bucket is located. For example, if the region is China (Hangzhou), set yourRegion to oss-cn-hangzhou.
        region: 'yourRegion',
        authorizationV4: true,
        // The temporary AccessKey pair (AccessKey ID and AccessKey secret) obtained from the STS service.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // The security token (SecurityToken) obtained from the STS service.
        stsToken: 'yourSecurityToken',
        // Specify the bucket name.
        bucket: 'examplebucket'
      });
      // The folder name must end with a forward slash (/).
      client
        .put("log/", new Blob([]))
        .then((r) => {
          console.log(r);
        })
        .catch((e) => {
          console.log(e);
        });
    </script>
  </body>
</html>

Delete a folder

Deleting a folder requires two steps: list all objects under the folder using its key prefix, then delete them in bulk. The following example deletes the log/ folder and all its contents from examplebucket.

Warning

Deleting a folder permanently removes all objects and subdirectories under it. Proceed with caution.

<!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.18.0.min.js"></script>
  </head>
  <body>
    <script>
      const client = new OSS({
        // Set yourRegion to the region where the bucket is located. For example, if the region is China (Hangzhou), set yourRegion to oss-cn-hangzhou.
        region: "yourRegion",
        authorizationV4: true,
        // The temporary AccessKey ID and AccessKey secret obtained from the STS service.
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // The security token obtained from the STS service.
        stsToken: 'yourSecurityToken',
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
      });

      // Handle request failures. This prevents Promise.all from being interrupted and returns the failure reason and the name of the failed object.
      async function handleDel(name, options) {
        try {
          await client.delete(name);
        } catch (error) {
          error.failObjectName = name;
          return error;
        }
      }

      // Delete all objects under the specified prefix.
      async function deletePrefix(prefix) {
        const list = await client.list({
          prefix: prefix,
        });

        list.objects = list.objects || [];
        const result = await Promise.all(
          list.objects.map((v) => handleDel(v.name))
        );
        console.log(result);
      }
      // Delete the log/ folder and all its contents.
      deletePrefix("log/");
    </script>
  </body>
</html>

References

For the API operations used to create a folder, see PutObject and CreateDirectory.
For the API operation used to delete objects, see DeleteObject.