Browser applications for Object Storage Service (OSS) - Object Storage Service

This topic describes the use cases of a browser.

Prerequisites

Configure cross-domain rules for the bucket. For more information, see Preparations.
Build a Security Token Service (STS) server and obtain temporary authorization information from the client. For more information, see Build an STS server and obtain temporary authorization information from the client.

Supported browsers

The Browser.js SDK supports the following browser versions:

IE 10 or later and Edge
Important
- Import a promise library before you use the Browser.js SDK in IE.
- The Browser.js SDK uses the File API for file operations, which can cause issues in earlier browser versions. You can use third-party plug-ins to call OSS APIs for operations such as uploading and downloading files. For an example, see Web-based direct upload practices.
Mainstream versions of Chrome, Firefox, and Safari
The default browsers on mainstream versions of Android, iOS, and Windows Phone

Upload a file from a browser

The following sample code shows how to upload a file from a browser. The sample code uses Bootstrap styles.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css"
    />
    <style>
      .form-group {
        margin: 10px;
      }
    </style>
  </head>

  <body style="padding: 100px">
    <div class="form-group">
      <!-- // Select the file to upload. -->
      <label>Select file</label>
      <input type="file" id="file" />
    </div>
    <div class="form-group">
      <!-- // Specify the name of the file to upload to OSS. -->
      <label>Store as</label>
      <input type="text" class="form-control" id="object-key-file" value="" />
    </div>
    <div class="form-group">
      <!-- // Upload the file. -->
      <input
        type="button"
        class="btn btn-primary"
        id="file-button"
        value="Upload"
      />
    </div>
    <div class="form-group">
      <!-- // Show the upload progress. -->
      <div class="progress">
        <div
          id="progress-bar"
          class="progress-bar"
          role="progressbar"
          aria-valuenow="0"
          aria-valuemin="0"
          aria-valuemax="100"
          style="min-width: 2em"
        >
          0%
        </div>
      </div>
    </div>
    <!--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">
      // Specify the URL of your authorization server. For example, http://127.0.0.1:8000/sts.
      const appServer = "yourStsServer";
      // Specify the bucket name. For example, examplebucket.
      const bucket = "examplebucket";
      // Specify the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
      const region = "oss-cn-hangzhou";

      const urllib = OSS.urllib;

      const applyTokenDo = function (func) {
        const url = appServer;
        return urllib
          .request(url, {
            method: "GET",
          })
          .then(function (result) {
            const creds = JSON.parse(result.data);
            // Create an OSS client using the temporary access credentials.
            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: region,
              authorizationV4: true,
              accessKeyId: creds.AccessKeyId,
              accessKeySecret: creds.AccessKeySecret,
              stsToken: creds.SecurityToken,
              bucket: bucket,
            });

            return func(client);
          });
      };

      let currentCheckpoint;
      const progress = async function progress(p, checkpoint) {
        currentCheckpoint = checkpoint;
        const bar = document.getElementById("progress-bar");
        bar.style.width = `${Math.floor(p * 100)}%`;
        bar.innerHTML = `${Math.floor(p * 100)}%`;
      };

      let uploadFileClient;
      const uploadFile = function (client) {
        if (!uploadFileClient || Object.keys(uploadFileClient).length === 0) {
          uploadFileClient = client;
        }

        const file = document.getElementById("file").files[0];
        const key =
          document.getElementById("object-key-file").value.trim() || "object";
        console.log(`${file.name} => ${key}`);
        // Use multipartUpload to upload the selected file and use the progress parameter to set the progress bar.
        const options = {
          progress,
          partSize: 100 * 1024,
          meta: {
            year: 2017,
            people: "test",
          },
        };

        return client
          .multipartUpload(key, file, options)
          .then((res) => {
            console.log("upload success: %j", res);
            currentCheckpoint = null;
            uploadFileClient = null;
          })
          .catch((err) => {
            if (uploadFileClient && uploadFileClient.isCancel()) {
              console.log("stop-upload!");
            } else {
              console.error(err);
            }
          });
      };

      window.onload = function () {
        document.getElementById("file-button").onclick = function () {
          applyTokenDo(uploadFile);
        };
      };
    </script>
  </body>
</html>

References

For the complete sample code for browser applications, see the GitHub example.