Delete files by using the Browser.js SDK - Object Storage Service

You can delete one or more files (Objects) that you no longer need.

Warning

Deleted objects cannot be recovered. Exercise caution when you delete 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.

Delete a single file

The following code deletes a single file:

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

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

<body>
  <button id="delete">Delete</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 STS.
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // The security token (SecurityToken) obtained from STS.
      stsToken: 'yourSecurityToken',
      // Specify the bucket name. For example, examplebucket.
      bucket: "examplebucket",
    });

    const deleteSingle = document.getElementById("delete");   

    // Delete a single file.
    deleteSingle.addEventListener("click", async () => {
      // Specify the name of the object to delete. The object name must be the full path of the object, not including the bucket name. For example, exampledir/exampleobject.txt.
      let result = await client.delete('exampledir/exampleobject.txt');
      console.log(result);
    });

  </script>
</body>

</html>

Delete multiple files

The following code deletes multiple files:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="deleteAll">Delete multiple files</button>
    <!--Import the SDK file.-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.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 STS.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // The security token (SecurityToken) obtained from STS.
        stsToken: 'yourSecurityToken',
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
      });

      const deleteAll = document.getElementById("deleteAll");

      // Delete multiple files.
      deleteAll.addEventListener("click", async () => {
        // Specify the names of the objects to delete. The object names must be the full paths of the objects, not including the bucket name.
        let result = await client.deleteMulti([
          "example.txt",
          "exampleobject.txt",
          "newexampleobject.txt",
        ]);
        console.log(result);

        result = await client.deleteMulti(
          ["example.txt", "exampleobject.txt", "newexampleobject.txt"],
          {
            // Use the quiet parameter to specify whether to return a list of all deleted files. If quiet is set to true, OSS does not return a message body. If quiet is set to false, OSS returns a list of all deleted files.
            quiet: true,
          }
        );
      });
    </script>
  </body>
</html>

References

Delete a single file
- For complete sample code, see GitHub example.
- For more information about the API operation, see DeleteObject.
Delete multiple files
- For complete sample code, see GitHub example.
- For more information about the API operation, see DeleteMultipleObjects.