This topic describes the application of OSS SDK for Browser.js in browsers.

Supported browsers

OSS SDK for Browser.js supports the following browsers:

  • Internet Explorer 10 and later and Microsoft Edge
    Important To use OSS SDK for Browser.js in Internet Explorer, you must import the promise library.
  • Google Chrome, Firefox, or Safari of mainstream versions
  • Default browsers of mainstream versions that are used by Android, iOS, or Windows Phone

Upload an object by using a browser

OSS SDK for Browser.js uses the File API to perform operations on objects. Therefore, problems may occur when you use the SDK in browsers of earlier versions. We recommend that you use third-party plug-ins to call OSS API operations to perform operations on objects, such as upload and download objects. For more information about how to use third-party plug-ins to call OSS API operations, see Add signatures on the client by using JavaScript and upload data to OSS.

Perform the following steps to upload an object by using a browser

  1. Configure Cross-origin resource sharing (CORS) rules
    1. Log on to the OSS console.
    2. In the left-side navigation pane, click Buckets. On the Buckets page, click the name of the desired bucket.
    3. In the left-side navigation tree, choose Content Security > Cross-Origin Resource Sharing (CORS).
    4. On the page that appears, click Create Rule. In the Create Rule panel, configure the parameters. The following table describes the parameters. Retain the default configurations of other parameters that are not described in the table.
      Parameter Example
      Sources Set the parameter to *.
      Allowed Methods Select GET, POST, PUT, DELETE, and HEAD.
      Allowed Headers Set this parameter to *.
      Exposed Headers Set this parameter to ETag.
    5. Click OK.
  2. Create a web page.
    The following code provides an example on how to create a bucket: class="xxx" indicates that the Bootstrap style is used.
    <div class="form-group">
      // Create a selection box to select the object that you want to upload to OSS. 
      <label>Select file</label>
      <input type="file" id="file" />
    </div>
    <div class="form-group">
      // Create a text box to specify the name of the object that you want to upload to OSS. 
      <label>Store as</label>
      <input type="text" class="form-control" id="object-key-file" value="object" />
    </div>
    <div class="form-group">
      // Create a button to upload the object to OSS. 
      <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
    </div>
    <div class="form-group">
      // Create a progress bar that displays 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>                           
  3. Add a style
    Bootstrap is used to add the style. The following code provides an example on how to add a style in the <head> field:
    <head>
      <title>OSS in Browser</title>
      <link rel="stylesheet" href="bootstrap.min.css" />
    </head>                            
  4. Add scripts
    The web page remains static after you perform the preceding two steps. You must add JavaScript scripts to the web page to upload the object to OSS.
    1. Import the package of OSS SDK for Browser.js to the <head> field.
      <head>
        <title>OSS in Browser</title>
        <link rel="stylesheet" href="bootstrap.min.css" />
        <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.17.1.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
      </head>                            
    2. Run the following code in app.js.
      // Specify the address of your authorized server. 
      const appServer = 'http://localhost:3000';
      // Specify the name of the bucket. Example: examplebucket. 
      const bucket = 'examplebucket';
      // Specify the region in which the bucket is located. For example, if your bucket is located 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);
          // Use temporary access credentials to create an OSSClient. 
          const client = new OSS({
            region: region,
            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 objects and use progress to configure 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);
        }
      };                            

References

For the complete sample code for the application in browsers, visit GitHub.