Form upload allows you to directly upload objects to Object Storage Service (OSS) by using standard HTML forms from web applications. This way, after an object is selected on the front-end page, the browser initiates a PostObject request to directly upload the object to the OSS server without using the website server. This reduces the workload on the website server and improves the efficiency and stability of object upload.
Limits
The size of the object that you want to upload by using form upload cannot exceed 5 GB.
Scenarios
Form upload is widely used in web applications, including but not limited to the following scenarios:
User data upload: Users upload an avatar, ID card photo, or other identity verification materials when they register an account. They upload a new avatar or background image when they modify information in the personal center.
Object sharing and storage: Users upload objects in various formats, such as documents, images, audio files, and video files, to Alibaba Cloud for storage and sharing by using forms on online disks and collaborative working platforms.
Content creation and publishing: Users write articles on platforms, such as blogs, forums, and Q&A communities, and upload images and attachments as content supplements by using forms.
E-commerce management: Merchants upload information, such as commodity pictures, detailed description documents, and qualifications, in the background of e-commerce platforms. Consumers upload invoice requirements or other supporting materials during the purchase process.
Online education platform: Students upload homework or projects, such as documents, PPTs, and video files. Teachers upload teaching materials and courseware.
Recruitment website: Job seekers upload resumes, portfolios and other materials. Enterprises upload materials, such as their company logos and recruitment documents, when they post positions.
Questionnaires and feedback: Users upload additional evidence or explanatory documents when they fill out the online questionnaires.
Software development collaboration: Developers upload code files or project documents from code hosting platforms such as GitHub and GitLab.
Solution
The client requests the signature and POST policy required by a PostObject request from the application server. Then, the client can use the signature and POST policy to upload objects without using OSS SDKs. You can use the POST policy generated by the application server to limit the attributes of the object, such as the object size and type. This solution is suitable for scenarios in which you want to upload objects by using HTML forms. This solution does not support multipart upload and resumable upload. For more information, see PostObject.
The following figure shows how to upload an object from a client to OSS by using the signature and POST policy that are obtained from the application server.
The client requests information, such as a signature and POST policy, from the application server.
The application server generates and returns information, such as the signature and POST policy, to the client.
The client uses information, such as the signature and POST policy, to call the PostObject operation to upload the object to OSS by using an HTML form.
OSS returns a success response to the client.
Procedure
The server generates information, such as the signature and POST policy.
The client uses information, such as the signature and POST policy, to call the PostObject operation to upload the object to OSS by using an HTML form.
JavaScript is used in the following example:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload an object to OSS</title>
</head>
<body>
<div class="container">
<form>
<div class="mb-3">
<label for="file" class="form-label">Select the object</label>
<input type="file" class="form-control" id="file" name="file" required>
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
<script type="text/javascript">
const form = document.querySelector('form');
const fileInput = document.querySelector('#file');
form.addEventListener('submit', (event) => {
event.preventDefault();
let file = fileInput.files[0];
let filename = fileInput.files[0].name;
fetch('/get_post_signature_for_oss_upload', { method: 'GET' })
.then(response => response.json())
.then(data => {
const formData = new FormData();
formData.append('name',filename);
formData.append('policy', data.policy);
formData.append('OSSAccessKeyId', data.ossAccessKeyId);
formData.append('success_action_status', '200');
formData.append('signature', data.signature);
formData.append('key', data.dir + filename);
// Set file to the last form field. No particular order is required for other form fields.
formData.append('file', file);
fetch(data.host, { method: 'POST', body: formData},).then((res) => {
console.log(res);
alert ('Object Uploaded');
});
})
.catch(error => {
console.log('Error occurred while getting OSS upload parameters:', error);
});
});
</script>
</body>
</html>
Usage notes
Data security
PUT request costs
Object upload to a bucket for which OSS-HDFS is enabled
Upload performance tuning
Object overwriting
Authorized upload
By default, OSS overwrites existing objects with the uploaded objects that have the same names. You can use the following methods to prevent the existing objects from being unexpectedly overwritten:
Enable versioning for the bucket
If you enable versioning for a bucket, objects that are overwritten in the bucket are saved as previous versions. You can restore the previous versions of the objects at any time. For more information, see Overview.
Include the x-oss-forbid-overwrite parameter in the upload request
You can add the x-oss-forbid-overwrite parameter to the header of the upload request and set this parameter to true. If you upload an object that has the same name as an existing object, the object fails to be uploaded and the FileAlreadyExists
error code is returned. If you do not add this parameter to the request header or if you set this parameter to false, the object overwrites an existing object that has the same name in the bucket.
OSS provides access control at the bucket and object levels to prevent unauthorized data uploads to your bucket by third parties. For more information, see Overview.
You can use a signed URL to grant a third-party user the permissions to upload a specific object. This way, the third-party user can upload data without access credentials or authorization. OSS stores the uploaded data as an object in the bucket. For more information, see Upload local files with signed URLs.
If you want to upload a large number of objects and set the storage classes of the objects to Deep Cold Archive, you are charged high PUT request fees. We recommend that you set the storage classes of the objects to Standard when you upload the objects, and configure lifecycle rules to convert the storage classes of the Standard objects to Deep Cold Archive. This reduces PUT request fees.
To maintain OSS-HDFS stability and prevent data loss, do not upload an object to the .dlsdata/
directory of a bucket for which OSS-HDFS is enabled by using methods that are not supported by OSS-HDFS.
If you upload a large number of objects and the names of the objects contain sequential prefixes such as timestamps and letters, multiple object indexes may be stored in a single partition. As a result, latency increases when a large number of requests are sent to query these objects. If you want to upload a large number of objects, we recommend that you use random prefixes instead of sequential prefixes to specify object names. For more information, see OSS performance and scalability best practices.