Performing a Browser-Based Upload

Updated on 2024-04-26 GMT+08:00

View PDF

NOTICE:

If you have any questions during development, post them on the Issues page of GitHub. For details about parameters and usage of each API, see the API Reference.

Performing a browser-based upload is to upload objects to a specified bucket in HTML form. The maximum size of an object is 5 GB.

You can call ObsClient.createPostSignatureSync to generate request parameters for a browser-based upload. You can use BrowserJS code to simulate a browser-based upload. For details, see post-object-sample. You can also perform a browser-based upload with the following steps:

Call ObsClient.createPostSignatureSync to generate request parameters for authentication.
Prepare an HTML form page.
Enter the request parameters in the HTML page.
Select a local file and upload it in browser-based mode.

NOTE:

There are two request parameters generated:

Policy, which corresponds to the policy field in the form
Signature: which corresponds to the signature field in the form

The following sample code shows how to generate the parameters in a browser-based upload request.

// Create an instance of ObsClient.
var obsClient = new ObsClient({
    // Hard-coded or plaintext AK/SK are risky. For security purposes, encrypt your AK/SK and store them in the configuration file or environment variables. In this example, the AK/SK are stored in environment variables for identity authentication. Before running this example, configure environment variables AccessKeyID and SecretAccessKey.
    // The front-end code does not have the process environment variable, so you need to use a module bundler like webpack to define the process variable.
    // Obtain an AK/SK pair on the management console. For details, see https://support.huaweicloud.com/eu/usermanual-ca/ca_01_0003.html.
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    // Replace the example endpoint with the actual one in your case.
    server: 'https://obs.eu-west-101.myhuaweicloud.eu'
});

// Set parameters for the form.
var formParams = {
              // Set the object ACL to public-read.
              'x-obs-acl': obsClient.enums.AclPublicRead, 
              // Set the MIME type for the object.
              'content-type': 'text/plain'           
};

// Set the validity period for the browser-based upload request, in seconds.
var expires = 3600;

var res = obsClient.createPostSignatureSync({Expires:expires, FormParams: formParams});

// Obtain the request parameters.
console.log('\t' + res.Policy);
console.log('\t' + res.Signature);

Code of an HTML form example is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<form action="http://bucketname.your-endpoint/" method="post" enctype="multipart/form-data">
Object key
<!-- Object name -->
<input type="text" name="key" value="objectname" />
<p>
ACL
<!-- Object ACL -->
<input type="text" name="x-obs-acl" value="public-read" />
<p>
Content-Type
<!-- Object MIME type -->
<input type="text" name="content-type" value="text/plain" />
<p>
<!-- Base64 code of the policy -->
<input type="hidden" name="policy" value="*** Provide your policy ***" />
<!-- AK -->
<input type="hidden" name="AccessKeyId" value="*** Provide your access key ***"/>
<!-- Signature information -->
<input type="hidden" name="signature" value="*** Provide your signature ***"/>

<input name="file" type="file" />
<input name="submit" value="Upload" type="submit" />
</form>
</body>
</html>

NOTE:

Values of policy and signature in the HTML form are obtained from the value returned by ObsClient.createPostSignatureSync.

Parent topic: Object Upload

Previous topic: Performing a Resumable Upload

Next topic: Object Download

Feedback

Was this page helpful?

Helpful Not helpful

Provide feedback

Thank you very much for your feedback. We will continue working to improve the documentation.

The system is busy. Please try again later.

Which of the following issues have you encountered?

Content is inconsistent with the product UI

Unclear descriptions

Lack of examples or code

Incorrect steps

Can't find what I need

Lack of best practices

Feedback (optional)

0/500

Select at least one type of issue, and enter your comments or suggestions.

Enter a maximum of 500 characters.

Submit Cancel