edit-icon download-icon

Browser

Last Updated: Dec 22, 2017

Supported browser

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

Note For IE, you must 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 through browser, you must 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

Note: 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 more information on how to set the subaccounts and STS policies, see Overview. For how to establish your own authorization servers, see Node.js STS AppServer.

For example:

Here, we use SDK to develop a webpage app which offers four features:

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

For complete code, see oss-in-browser. The expected result is as follows:

example

Let’s take upload objects as an example in the following text:

1. Create a webpage

Four controls are required 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 following code creates 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

You can add some styles to the webpage to enhance its look. 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 does not respond to any click. We can 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. The 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. };

The following are the steps to uploading an object:

  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 (see Overview). For authorization server information, see GitHub.

To make it more convenient, the authorization server in the example returns the temporary credential to the user directly.

  1. Create an OSS client using a temporary key.

  2. 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, see the example code: OSS in Browser.

Thank you! We've received your feedback.