Resumable upload lets you specify a checkpoint before you upload a file to OSS. If the upload is interrupted by a network error or a program crash, the upload can be resumed from the checkpoint.
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
The following code provides an example of a resumable upload.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="submit">Upload</button>
<button id="pause">Pause</button>
<button id="resume">Resume Upload</button>
<!--Import the SDK file.-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// Set yourRegion to the region where the bucket is located. For example, if the region is China (Hangzhou), set yourRegion to oss-cn-hangzhou.
region: 'yourRegion',
authorizationV4: true,
// The temporary AccessKey pair (AccessKey ID and AccessKey secret) obtained from Security Token Service (STS).
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// The security token (SecurityToken) obtained from STS.
stsToken: 'yourSecurityToken',
// Specify the bucket name, for example, examplebucket.
bucket: "examplebucket",
});
// Generate a 100 MB file for the resumable upload.
const fileContent = Array(1024 * 1024 * 100)
.fill("a")
.join("");
const file = new File([fileContent], "multipart-upload-file");
// The full path of the object. Example: exampledir/exampleobject.txt.
const name = "test.txt";
// Define the checkpoint.
let abortCheckpoint;
// Get the upload and pause DOM elements.
const submit = document.getElementById("submit");
const pause = document.getElementById("pause");
// Get the resume DOM element.
const resume = document.getElementById("resume");
// Add a listener to the upload button. The upload starts when you click Upload.
submit.addEventListener("click", () => {
client
.multipartUpload(name, file, {
progress: (p, cpt, res) => {
// Assign a value to the checkpoint.
abortCheckpoint = cpt;
console.log(abortCheckpoint);
// Obtain the upload progress.
console.log(p * 100);
},
})
.then((r) => console.log(r));
});
// Add a listener to the pause button.
pause.addEventListener("click", () => {
// Pause the upload.
client.cancel();
});
const resumeUpload = async () => {
// Set the number of retries to five.
try {
const result = await client.multipartUpload(name, file, {
checkpoint: abortCheckpoint,
progress: (p, cpt, res) => {
// To implement resumable upload, you can save the checkpoint information during the upload. If an upload error occurs, pass the saved checkpoint as a parameter to multipartUpload. The upload then resumes from the point of the last failure.
abortCheckpoint = cpt;
// Obtain the upload progress.
console.log(p);
},
});
console.log(result);
} catch (e) {
console.log(e);
}
};
// Add a listener to the resume button. The upload continues when you click Resume Upload.
resume.addEventListener("click", async () => {
await resumeUpload();
});
</script>
</body>
</html>
References
For the complete sample code for resumable uploads, see the GitHub example.