This topic describes how to call the PutObject operation to upload files, Blob data, or Object Storage Service (OSS) buffers to OSS. Progress functions cannot be used in simple upload.
Prerequisites
OSS SDK for Browser.js is installed. For more information, see Installation.
Usage notes
When you use packaging tools such as Webpack and Browserify, install OSS SDK for Browser.js by running the npm install ali-oss command.
If you want to access an OSS bucket from a browser but no CORS rules are configured for the bucket, the browser rejects the request. Therefore, you must configure CORS rules for a bucket if you want to access the bucket from a browser. For more information, see Installation.
In most cases, OSS SDK for Browser.js is used in browsers. To prevent your AccessKey pair from being exposed, we recommend that you use temporary access credentials obtained from Security Token Service (STS) to access OSS.
The temporary access credentials consist of an AccessKey pair and a security token. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. For more information about how to obtain temporary access credentials, see Use STS for temporary access authorization.
Sample code
Blob indicates large binary objects. For more information, see Blob.
The following code provides an example on how to use simple upload to upload data to an object named exampleobject.txt of the exampledir directory in the examplebucket bucket:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input id="file" type="file" />
<button id="upload">Upload an Object</button>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
<script>
const client = new OSS({
// Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
region: "yourRegion",
authorizationV4: true
// Specify the temporary AccessKey pair obtained from STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// Specify the security token that you obtained from STS.
stsToken: "yourSecurityToken",
// Specify the name of the bucket.
bucket: "examplebucket",
});
// Select the local file from the drop-down list. Example: <input type="file" id="file" />.
let data;
// Create and specify the Blob data.
//const data = new Blob(['Hello OSS']);
// Create an OSS buffer and specify the content of the OSS buffer.
//const data = new OSS.Buffer(['Hello OSS']);
const upload = document.getElementById("upload");
async function putObject(data) {
try {
// Specify the full path of the object. Do not include the bucket name in the full path.
// Specify the object name or the full path of the object to upload data to the current bucket or a specific directory in the bucket. For example, set the object name to exampleobject.txt or the path of the object to exampledir/exampleobject.txt.
// You can set the data to files, Blob data, or OSS buffers.
const options = {
meta: { temp: "demo" },
mime: "json",
headers: { "Content-Type": "text/plain" },
};
const result = await client.put("examplefile.txt", data, options);
console.log(result);
} catch (e) {
console.log(e);
}
}
upload.addEventListener("click", () => {
const data = file.files[0];
putObject(data);
});
</script>
</body>
</html>
FAQ
Can I obtain the upload progress for simple upload?
No. You can obtain the upload progress for only multipart upload and resumable upload. For more information, see Multipart upload and Resumable upload.