Browser

Last Updated: Aug 08, 2017

Supported browser

  • IE (>=10) and Edge
  • Mainstream Chrome/Firefox/Safari versions
  • Mainstream Android/iOS/WindowsPhone versions

Please be noted that for IE, you need to introduce the promise library before introducing the SDK:

  1. <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
  2. <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

Settings

Bucket settings

To access OSS via browser, you need to set the CORS of the bucket as follows:

  • Set Source to *
  • Set Method to GET, POST, PUT, DELETE, HEAD
  • Set Allowed Headers to *
  • Set Expose Header to ETag

Notice: Set the preceding CORS rule to the first option.

Add rule

STS settings

To prevent exposing the AccessKeyId and AccessKeySecret in the webpage, Alibaba Cloud adopts STS for temporary authorization. The authorization server is maintained by users. Only authenticated users are allowed to apply for a temporary permission from the authorization server.

For how to set the subaccounts and STS policies, refer to Use STS in OSS. For how to establish your own authorization servers, refer to Node.js STS AppServer.

Example

In this section we will use the SDK to develop a webpage app which offers four features:

  • Upload objects
  • Upload text
  • List objects
  • Download objects

The complete code can be found in oss-in-browser. The expected result is shown below:

example

We will take upload objects as an example in the text below:

1. Create a webpage

Four controls are needed for the update objects feature:

  • An object choice box to select the object to be uploaded
  • A textbox to input the name of the object to be uploaded to the OSS
  • A button to start the upload
  • A progress bar to display the upload progress

The code below creates the four controls. class="xxx" serves to apply the Bootstrap style and can be ignored here.

  1. <div class="form-group">
  2. <label>Select file</label>
  3. <input type="file" id="file" />
  4. </div>
  5. <div class="form-group">
  6. <label>Store as</label>
  7. <input type="text" class="form-control" id="object-key-file" value="object" />
  8. </div>
  9. <div class="form-group">
  10. <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
  11. </div>
  12. <div class="form-group">
  13. <div class="progress">
  14. <div id="progress-bar"
  15. class="progress-bar"
  16. role="progressbar"
  17. aria-valuenow="0"
  18. aria-valuemin="0"
  19. aria-valuemax="100" style="min-width: 2em;">
  20. 0%
  21. </div>
  22. </div>
  23. </div>

2. Add a style

Add some styles for the webpage to make it look better. Here we use Bootstrap. Add the style in the <head> tag as follows:

  1. <head>
  2. <title>OSS in Browser</title>
  3. <link rel="stylesheet" href="bootstrap.min.css" />
  4. </head>

bootstrap.min.css can be downloaded from the official website of Bootstrap.

3. Add a script

Before adding a script, the webpage is static and there is no response to any click. We will add some JavaScript so that it can upload/download/list objects.

First, introduce the SDK in the <head> tag:

  1. <head>
  2. <title>OSS in Browser</title>
  3. <link rel="stylesheet" href="bootstrap.min.css" />
  4. <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
  5. <script type="text/javascript" src="app.js"></script>
  6. </head>

app.js contains the code that implements the object uploading. Its content is as follows:

  1. var appServer = 'http://localhost:3000';
  2. var bucket = 'js-sdk-bucket-sts';
  3. var region = 'oss-cn-hangzhou';
  4. var urllib = OSS.urllib;
  5. var OSS = OSS.Wrapper;
  6. var STS = OSS.STS;
  7. var applyTokenDo = function (func) {
  8. var url = appServer;
  9. return urllib.request(url, {
  10. method: 'GET'
  11. }).then(function (result) {
  12. var creds = JSON.parse(result.data);
  13. var client = new OSS({
  14. region: region,
  15. accessKeyId: creds.AccessKeyId,
  16. accessKeySecret: creds.AccessKeySecret,
  17. stsToken: creds.SecurityToken,
  18. bucket: bucket
  19. });
  20. return func(client);
  21. });
  22. };
  23. var progress = function (p) {
  24. return function (done) {
  25. var bar = document.getElementById('progress-bar');
  26. bar.style.width = Math.floor(p * 100) + '%';
  27. bar.innerHTML = Math.floor(p * 100) + '%';
  28. done();
  29. }
  30. };
  31. var uploadFile = function (client) {
  32. var file = document.getElementById('file').files[0];
  33. var key = document.getElementById('object-key-file').value.trim() || 'object';
  34. console.log(file.name + ' => ' + key);
  35. return client.multipartUpload(key, file, {
  36. progress: progress
  37. }).then(function (res) {
  38. console.log('upload success: %j', res);
  39. return listFiles(client);
  40. });
  41. };
  42. window.onload = function () {
  43. document.getElementById('file-button').onclick = function () {
  44. applyTokenDo(uploadFile);
  45. }
  46. };

Uploading an object has the following steps:

  1. Apply for a temporary permission from the authorization server. The authorization server is a service built by the website developer to provide temporary authorization for end users. Developers can provide different permissions for different users during authorization (refer to Use STS in OSS). For authorization server information, refer to Example. For the sake of convenience, the authorization server in the example returns the temporary credential to the user directly.

  2. Create an OSS client using a temporary key.

  3. Upload the selected files through the multipartUpload interface and set the progress bar through the progress parameter.

4. Other features

For text content uploading, object list retrieval, and object downloading features, refer to the example code: OSS in Browser.

Thank you! We've received your feedback.