How to prevent overwriting files with the same name by using Browser.js SDK - Object Storage Service

By default, if you upload an object that has the same name as an existing object, the existing object is overwritten by the uploaded object. This topic describes how to configure the x-oss-forbid-overwrite request header to prevent existing objects from being overwritten by objects with the same names when you copy objects or perform simple upload or multipart upload.

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.

Simple upload

The following code shows how to prevent an object with the same name from being overwritten during a simple upload:

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

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

<body>
  <button id='upload'>Upload</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 yourRegion to the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou.
       region: 'yourRegion',
       authorizationV4: true,
       // The temporary 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. Example: examplebucket.
       bucket: "examplebucket",
      });

    const upload = document.getElementById('upload')

    // Specify the local file to upload.
    const fileContent = Array(1024 * 1024 * 10).fill('a').join('')
    const fileName = 'example.txt'
    const file = new Blob([fileContent])
    // Specify whether to overwrite an object that has the same name. In this example, this parameter is set to true. This indicates that an object that has the same name cannot be overwritten. If an object with the same name exists, an error is reported.
    const headers = {
      'x-oss-forbid-overwrite': true
    }
    upload.addEventListener('click', () => {
      // Upload the file.
      client.put(fileName, file, { headers }).then(r => console.log(r))
    })

  </script>
</body>

</html>

Copy a file

The following code shows how to prevent an object with the same name from being overwritten when you copy an object:

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

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

<body>
  <button id='upload'>Upload</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 yourRegion to the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou.
       region: 'yourRegion',
       authorizationV4: true,
       // The temporary 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. Example: examplebucket.
       bucket: "examplebucket",
      });

    const upload = document.getElementById('upload')

    // Specify the file to copy.
    const fileContent = Array(1024 * 1024 * 5).fill('a').join('')
    const fileName = 'example.txt'
    const file = new Blob([fileContent])
    // Specify whether to overwrite an object that has the same name during the copy operation. In this example, this parameter is set to true. This indicates that an object that has the same name cannot be overwritten. If an object with the same name exists, an error is reported.
    const headers = {
      'x-oss-forbid-overwrite': true
    }
    upload.addEventListener('click', () => {
      // Copy the file.
      // Set the name of the destination file to dest.txt.
      client.copy("dest.txt",fileName,{headers}).then(r=>console.log(r))
    })

  </script>
</body>

</html>

Multipart upload

The following code shows how to prevent an object with the same name from being overwritten during a multipart upload:

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

  <body>
    <button id="upload">Upload</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 yourRegion to the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou.
        region: 'yourRegion',
        authorizationV4: true,
        // The temporary 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. Example: examplebucket.
        bucket: "examplebucket",
      });

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

      // Specify the file to upload.
      const fileContent = Array(1024 * 1024 * 5)
        .fill("a")
        .join("");
      const fileName = "src.txt";
      const file = new Blob([fileContent]);
      // Specify whether to overwrite an object that has the same name. In this example, this parameter is set to true. This indicates that an object that has the same name cannot be overwritten. If an object with the same name exists, an error is reported.
      const headers = {
        "x-oss-forbid-overwrite": true,
      };
      upload.addEventListener("click", () => {
        // Perform a multipart upload.
        client
          .multipartUpload("dest.txt", file, { headers })
          .then((r) => console.log(r));
      });
    </script>
  </body>
</html>

References

For more information about the API operation that you can call to perform simple upload, see PutObject.
For more information about the API operation that you can call to copy an object, see CopyObject.
The multipartUpload method in the Browser.js SDK is used for multipart uploads and encapsulates the following three API operations:
- For more information about the API operation for initiating a multipart upload, see InitiateMultipartUpload.
- For more information about the API operation for uploading parts, see UploadPart.
- For more information about the API operation for completing a multipart upload, see CompleteMultipartUpload.