This topic describes how to use OSS SDK for Browser.js to perform operations such as uploading and downloading objects and viewing the list of objects.
Prerequisites
A cross-origin resource sharing (CORS) rule is configured for the bucket. For more information, see Configure CORS rules.
- Source is set to an asterisk (
*
). - GET, POST, PUT, DELETE and HEAD are selected for Allowed Methods.
- Allowed Headers is set to
*
. - Exposed Headers is set to
ETag
,x-oss-request-id
, andx-oss-version-id
.

Background information
The AccessKey pair of an Alibaba Cloud account has permissions on all API operations of OSS. We recommend that you use STS to authorize the client. You can use STS to grant a third-party application or your RAM user an access credential that has custom permissions and a custom validity period. For more information, see Access OSS by using a temporary access credential provided by STS.
For more information about how to use browsers, see Browser.
For more information about sample projects, see example.
Use the SDK
Currently, browsers do not support bucket-related operations, such as GetBucket (ListObjects), GetBucketLogging, and GetBucketReferer. However, you can use a browser to perform object-related operations, such as PutObject and GetObject.
- Import the SDK
Include the following information in
<head>
of the HTML file:<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>
For more information about the methods to import the SDK, see Installation.
You can use the
new OSS
method to create a client. This method provides an asynchronous API operation similar to the callback method to process the returned results in.then()
and handle errors in.catch()
. - Build an STS server and obtain temporary authorization information from the client
- Use the STS-based signature services exclusive to SDKs or API operations. To help
you get started with the STS service, OSS provides SDK demos in the following programming
languages:
Note The preceding demos are for reference only. You must develop code required for authentication and other functions in the production environment.
- Initiate requests to the STS service built in the frontend (browser) to obtain the
STS temporary authorization information.
<script type="text/javascript"> // OSS.urlib is the logic of sending requests encapsulated within the SDK. Developers can use any library that sends requests to send requests to the STS server. OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => { if (err) { return alert(err); } try { result = JSON.parse(response); } catch (e) { errmsg = 'parse sts response info error: ' + e.message; return alert(errmsg); } // console.log(result) }) </script>
- Use the STS-based signature services exclusive to SDKs or API operations. To help
you get started with the STS service, OSS provides SDK demos in the following programming
languages:
- Upload objects
You can call the multipartUpload operation to upload objects. For more information about multipartUpload, see Multipart upload.
<body> <input type="file" id="file" /> <script type="text/javascript"> document.getElementById('file').addEventListener('change', function (e) { let file = e.target.files[0]; let storeAs = 'upload-file'; console.log(file.name + ' => ' + storeAs); // OSS.urlib is the logic of sending requests encapsulated within the SDK. Developers can use any library that sends requests to send requests to the STS server. OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => { if (err) { return alert(err); } try { result = JSON.parse(response); } catch (e) { return alert('parse sts response info error: ' + e.message); } let client = new OSS({ accessKeyId: result.AccessKeyId, accessKeySecret: result.AccessKeySecret, stsToken: result.SecurityToken, // region indicates the region from which OSS services are provided. Example: oss-cn-hangzhou. region: '<Your region>', bucket: '<Your bucket name>' }); // You can set storeAs to an object name such as file.txt or a directory such as abc/test/file.txt to upload the object to the root folder or the specified folder in the bucket. // You can set file to file objects, Blob data, or OSS buffers. client.multipartUpload(storeAs, file).then(function (result) { console.log(result); }).catch(function (err) { console.log(err); }); }); }); </script> </body>
- Download objects
OSS generates a signed URL as the download link of an object. You need only to click the link to download the object.
<body> <input type="button" id="download" value="Download" /> <script type="text/javascript"> document.getElementById('download').addEventListener('click', function (e) { let objectKey = 'test/download_file'; let saveAs = 'download_file'; console.log(objectKey + ' => ' + saveAs); // OSS.urlib is the logic of sending requests encapsulated within the SDK. Developers can use any library that sends requests to send requests to the STS server. OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => { if (err) { return alert(err); } try { result = JSON.parse(response); } catch (e) { return alert('parse sts response info error: ' + e.message); } let client = new OSS({ accessKeyId: result.AccessKeyId, accessKeySecret: result.AccessKeySecret, stsToken: result.SecurityToken, // region indicates the region from which OSS services are provided. Example: oss-cn-hangzhou. region: '<Your region>', bucket: '<Your bucket name>' }); let result = client.signatureUrl(objectKey, { expires: 3600, response: { 'content-disposition': 'attachment; filename="' + saveAs + '"' } }); console.log(result); window.location = result; }); }); </script> </body>
- View objects in a bucket
The following code provides an example on how to view objects in a bucket:
<script type="text/javascript"> OSS.urllib.request("http://your_sts_server/", {method: 'GET'}, (err, response) => { if (err) { return alert(err); } try { result = JSON.parse(response); } catch (e) { return alert('parse sts response info error: ' + e.message); } let client = new OSS({ accessKeyId: result.AccessKeyId, accessKeySecret: result.AccessKeySecret, stsToken: result.SecurityToken, // region indicates the region from which OSS services are provided. Example: oss-cn-hangzhou. region: '<Your region>', bucket: '<Your bucket name>' }); client.list({ 'max-keys': 10 }).then(function (result) { console.log(result); }).catch(function (err) { console.log(err); }); }); </script>
You can open the HTML file in Google Chrome and view the listed objects in Chrome DevTools.