All Products
Search
Document Center

Object Storage Service:Manage folders (Browser.js SDK)

Last Updated:Nov 29, 2025

To simplify the organization and management of large numbers of objects, which can be difficult in a flat structure, Object Storage Service (OSS) offers the directory feature that simulates a folder structure.

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.

Create a directory

<!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'
      });
      // Specify the directory name. The directory 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 directory

Delete a directory and all its objects by specifying a Prefix. For example, to delete the log directory and all its objects from the examplebucket bucket, set the Prefix parameter in the sample code to log/.

Warning

Deleting a directory also deletes all its subdirectories and objects. 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 file.
      async function handleDel(name, options) {
        try {
          await client.delete(name);
        } catch (error) {
          error.failObjectName = name;
          return error;
        }
      }

      // Delete multiple files.
      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 a directory and all files in the directory.
      deletePrefix("log/");
    </script>
  </body>
</html>

References

  • For more information about the API operations that you can call to create a directory, see PutObject and CreateDirectory.

  • For more information about the API operation that you can call to delete a directory and all objects in the directory, see DeleteObject.