All Products
Search
Document Center

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

Last Updated:Sep 23, 2026

OSS provides directories that simulate a folder structure, making it easier to organize, locate, and perform bulk operations on large numbers of objects.

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 from the examplebucket bucket, set Prefix 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 used to delete folders and all their files, see DeleteObject.