Uploading Data from a Web Client to OBS and Setting an Upload Callback

Create a bucket on OBS Console and configure a CORS rule for the bucket.

1. Create a bucket.

If you already have a bucket, skip this part and go to 1 to configure a CORS rule.

1. In the navigation pane of OBS Console, choose Object Storage.
2. Click Create Bucket in the upper right corner of the page.
3. Configure parameters.

   Table 2 Parameters for creating a bucket

   Parameter	Example	Description
   Region	CN North-Beijing4	The region where the bucket is created Once the bucket is created, its region cannot be changed. For lower latency and faster access, select the region nearest to where the data will be accessed.
   Bucket Name	post-callback-demo	When creating a bucket, you need to set a proper bucket name. Once a bucket is created, its name cannot be changed. In accordance with the globally applied DNS naming rules, an OBS bucket name: Must be unique. It cannot be the same as the name of any existing bucket or parallel file system (including those created by others). You must wait at least 30 minutes before you can reuse the name of a deleted bucket or parallel file system. Must be 3 to 63 characters long. Can contain only lowercase letters, digits, hyphens (-), and periods (.). It cannot start or end with a hyphen (-) or period (.). Cannot contain two consecutive periods (..) or contain a period (.) and a hyphen (-) adjacent to each other. Cannot be formatted as an IP address.
   Enterprise Project	default	You can add the bucket to an enterprise project for unified management. If you do not have any specific needs for enterprise project division and management, choose the default enterprise project. To learn more about how to manage OBS buckets using enterprise projects, see the Enterprise Project parameter in Creating a Bucket.

4. Click Create Now in the lower right corner of the page. Confirm the information displayed and click OK.
5. In the displayed Created dialog box, click OK. View the newly created bucket in the bucket list.

2. Configure a CORS rule.

For general web page requests, website scripts and contents in one origin cannot interact with those in another because of Same Origin Policies (SOPs).

CORS is a browser-standard mechanism. It defines how a web client in one origin interacts with resources in another one. OBS supports CORS rules and allows resources in OBS to be accessed across origins. To configure a CORS rule on OBS Console, perform the following steps:

1. In the navigation pane of OBS Console, choose Object Storage.
2. In the bucket list, click the bucket you want to go to the Objects page.
3. In the navigation pane, choose Data Security > CORS Rules.
4. Click Create. The Create CORS Rule dialog box is displayed.
5. Configure parameters.

   Table 3 CORS rule parameters

   Parameter	Example	Description
   Allowed Origin	*	The origin that is allowed to access the bucket The value can contain 1 to 1,024 characters. You can enter multiple origins, with one separated from another using a line break. Each origin can contain one wildcard character (*) at most. An example is as follows: http://rds.example.com https://*.vbs.example.com
   Allowed Method	Get Post Put Delete Head	The methods (types of operations on buckets and objects) allowed for cross-origin requests. Request methods include Get, Post, Put, Delete, and Head.
   Allowed Header	*	Optional. It specifies the allowed headers for cross-origin requests. Only CORS requests matching the allowed headers are valid. The value can contain 1 to 1,024 characters. You can enter multiple allowed headers, with one separated from another using a line break. Each header can contain one wildcard character (*) at most. Spaces, ampersands (&), colons (:), and less-than signs (<) are not allowed.
   Exposed Header	ETag x-obs-request-id x-obs-api Content-Type Content-Length Cache-Control Content-Disposition Content-Encoding Content-Language Expires x-obs-id-2 x-reserved-indicator x-obs-version-id x-obs-copy-source-version-id x-obs-storage-class x-obs-delete-marker x-obs-expiration x-obs-website-redirect-location x-obs-restore x-obs-version x-obs-object-type x-obs-next-append-position x-obs-callback	Optional. It specifies the supplemented headers in CORS responses, providing additional information for clients. The value can contain 1 to 1,024 characters. You can enter multiple exposed headers, with one separated from another using a line break. Spaces, wildcard characters (*), ampersands (&), colons (:), and less-than signs (<) are not allowed.
   Cache Duration (s)	300	The duration (in seconds) that your browser can cache CORS responses. The default value is 100. Value range: 0 to 9999999

6. Click OK.

   A message will be displayed indicating that the CORS rule is successfully created. The CORS rule will take effect within two minutes.

The server generates a signature using the security credentials (the AK/SK pair and an optional security token) and upload policy (with the bucket name, object name prefix, expiration time, and others included). The signature authorizes you to complete the file upload within a specified time. To obtain or create an AK/SK pair, see Access Keys.

You are advised to configure the security credentials as environment variables to avoid exposing sensitive information in the code.

1. Configure environment variables.

• For Linux
  1. Run the following commands to add the environment variables to ~/.bashrc:

     echo "export ACCESS_KEY_ID='your access key id'" >> ~/.bashrc
     echo "export SECRET_ACCESS_KEY_ID='your secret access key id'" >> ~/.bashrc

  2. Run the following command to apply the settings in 1:

     source  ~/.bashrc

  3. Run the following commands to check whether the environment variables are successfully configured:

     echo $ACCESS_KEY_ID
     echo $SECRET_ACCESS_KEY_ID

     • If the information set in 1 is displayed in the command output, the settings apply successfully.
     • If the information set in 1 is not displayed in the command output, the settings fail to apply. In this case, configure the environment variables again.
• For Windows
  1. Run the following commands in the Command Prompt (CMD) to configure the environment variables:

     setx ACCESS_KEY_ID "your access key id"
     setx SECRET_ACCESS_KEY_ID "your secret access key id"

  2. Open a new CMD window and run the following commands to check whether the environment variables are successfully configured:

     echo %ACCESS_KEY_ID%
     echo %SECRET_ACCESS_KEY_ID%

     • If the information set in 1 is displayed in the command output, the settings apply successfully.
     • If the information set in 1 is not displayed in the command output, the settings fail to apply. In this case, configure the environment variables again.
• For macOS
  1. Open the bash terminal and run the following commands to add the environment variables to ~/.bash_profile:

     echo "export ACCESS_KEY_ID='your access key id'" >> ~/.bash_profile
     echo "export SECRET_ACCESS_KEY_ID='your secret access key id'" >> ~/.bash_profile

  2. Run the following command to apply the settings in 1:

     source  ~/.bashrc

  3. Run the following commands to check whether the environment variables are successfully configured:

     echo $ACCESS_KEY_ID
     echo $SECRET_ACCESS_KEY_ID

     • If the information set in 1 is displayed in the command output, the settings apply successfully.
     • If the information set in 1 is not displayed in the command output, the settings fail to apply. In this case, configure the environment variables again.

2. Calculate the signature.

You can calculate the POST upload signature using the web framework and OBS SDK of a programming language. A security policy defines which content can be uploaded using a form. For example, you can specify in a policy that only objects whose name starts with prefix01 can be uploaded using a form. For more information about security policies, see Signing Browser-Based Upload Requests.

Obtain the security credentials and calculate the signature by referring to the following Java sample code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

@Controller
public class FormUploadCallbackController {
    String bucket = "post-callback-demo";
    // The OBS address in CN North-Beijing4 is used as an example.
    String host = "obs.cn-north-4.myhuaweicloud.com";
    String endpoint = "https://" + host;
    String callbackUrl = "http://obs-demo.huaweicloud.com:12345/callback";
    //Specify the name prefix of files that can be uploaded to OBS.
    String prefix = "demo";

    @GetMapping("/obs-post-callback-signature")
    public ResponseEntity<Map<String, String>> getSignature() throws Exception {
        // Obtain an AK/SK pair using environment variables or import the AK/SK pair in other ways. Using hard coding may result in leakage.
        // Obtain an AK/SK pair on the management console.
        String ak = System.getenv("ACCESS_KEY_ID");
        String sk = System.getenv("SECRET_ACCESS_KEY_ID");
        // (Optional) If you are using a temporary AK/SK pair and a security token to access OBS, you are advised not to use hard coding, which may result in information leakage.
        // Obtain an AK/SK pair and a security token using environment variables or import them in other ways.
        // String securityToken = System.getenv("SECURITY_TOKEN");

        // Create an ObsClient instance.
        // (Optional) Use a temporary AK/SK pair and security token to initialize the client.
//      try ( ObsClient obsClient = new ObsClient(ak, sk, securityToken, enpoint)){
        // Use a permanent AK/SK pair to initialize the client.
        try ( ObsClient obsClient = new ObsClient(ak, sk, endpoint)){
            // 1. Specify conditions in a policy.
            // Generate a request for a form-based upload.
            PostSignatureRequest request = new PostSignatureRequest();
            // Configure form parameters.
            Map<String, Object> formParams = new HashMap<>();
            // Set the object ACL to public-read. Modify other configurations as required.
            formParams.put("x-obs-acl", "public-read");
            request.setFormParams(formParams);
            List<String> conditions = new ArrayList<>();
            // Set signature conditions for the POST request.
            conditions.add("[\"starts-with\", \"$key\", \"demo/\"]");
            conditions.add("{\"bucket\": \"post-callback-demo\"}");
            request.setConditions(conditions);
            // Configure the validity period (in seconds) for a form-based upload request.
            request.setExpires(3600);
            PostSignatureResponse response = obsClient.createPostSignature(request);
            System.out.println("createPostSignature successfully");
            // Obtain the request parameters.
            System.out.println("Policy:" + response.getPolicy());
            System.out.println("Signature:" + response.getSignature());
            Map<String, String> signResponse = new HashMap<>();
            signResponse.put("prefix", prefix);
            signResponse.put("accessKeyId", ak);
            signResponse.put("policy", response.getPolicy());
            signResponse.put("signature", response.getSignature());
            // (Optional) If you are using a temporary AK/SK pair and a security token to access OBS, the security token is returned.
//          signResponse.put("securityToken",securityToken);
            signResponse.put("host", host);
            signResponse.put("bucket", bucket);
            signResponse.put("callbackUrl", callbackUrl);
            signResponse.put("callbackBody", "key=$(key)&hash=$(etag)&fname=$(fname)&fsize=$(size)");
            signResponse.put("callbackBodyType", "application/json");
            return ResponseEntity.ok(signResponse);

        } catch (ObsException e) {
            System.out.println("createPostSignature failed");
            // Request failed. Print the HTTP status code.
            System.out.println("HTTP Code:" + e.getResponseCode());
            // Request failed. Print the server-side error code.
            System.out.println("Error Code:" + e.getErrorCode());
            // Request failed. Print the error message.
            System.out.println("Error Message:" + e.getErrorMessage());
            // Request failed. Print the request ID.
            System.out.println("Request ID:" + e.getErrorRequestId());
            System.out.println("Host ID:" + e.getErrorHostId());
            e.printStackTrace();
            throw e;
        }
    }
}

After receiving the upload policy and signature from the server, the web client uses an HTML form to construct a POST request and set an upload callback.

The following is an example of the response received by the web client from the server:

{
    "accessKeyId": "****************", // AK
    "bucket": "post-callback-demo",    // Name of the bucket that stores the uploaded file
    "callbackBodyType": "application/json", // Response body format
    "signature": "24*******************u8=", // POST upload signature
    "prefix": "demo",   // Name prefix of the object to be uploaded using POST
    "host": "obs.cn-north-4.myhuaweicloud.com", // Host address for the POST upload
    "callbackUrl": "http://obs-demo.huaweicloud.com:23450/callback",  // Callback URL of the POST upload
    "policy": "eyJleHBpcmF***************************************ifV19",  // POST upload policy
    "callbackBody": "key=$(key)&hash=$(etag)&fname=$(fname)&fsize=$(size)"   // Callback request body of the POST upload
}

The sample code for using an HTML form to construct a request and set an upload callback is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Huawei Cloud OBS Form-based Upload</title>
</head>
<body>
<h1>Callback example of the OBS form-based upload</h1>
<form>
    <div class="form-group">
        <label for="file" class="form-label">Select File</label>
        <input type="file" class="form-control" id="file" name="file" required/>
    </div>

    <button name="submit" value="Upload" type="submit">Upload to OBS</button>
</form>
<div id="result"></div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector("form");
        const fileInput = document.querySelector("#file");
        const resultDiv = document.getElementById("result");

        form.addEventListener("submit", async (event) => {
            event.preventDefault();

            if (!fileInput.files.length) {
                resultDiv.innerHTML = '<p style="color:red">Select a file.</p>';
                return;
            }
            const file = fileInput.files[0];
            if (!file) {
                alert('Select a file to upload.');
                return;
            }

            const filename = file.name;
            try {
                // 1. Obtain the signature parameters.
                resultDiv.innerHTML = 'Obtaining the signature...';
                const response = await fetch(`/obs-post-callback-signature`); 
                const params = await response.json();

                // 2. Construct form data.
                const formData = new FormData();
                formData.append('key', params.prefix + "/" + filename);
                formData.append('x-obs-acl', 'public-read');
                formData.append('policy', params.policy);
                formData.append('AccessKeyId', params.accessKeyId);
                formData.append('signature', params.signature);
                formData.append('callbackUrl', params.callbackUrl);
                formData.append('callbackBody', params.callbackBody);
                formData.append('callbackBodyType', params.callbackBodyType);
                // (Optional) If the server uses a security token to generate the signature, set the security token in the form.
                // formData.append('x-obs-security-token', params['x-obs-security-token']);
                formData.append('file', file);

                // 3. Submit the data to OBS.
                resultDiv.innerHTML = 'Uploading...';
                const obsEndpoint = `https://${params.bucket}.${params.host}`;

                const uploadResponse = await fetch(obsEndpoint, {
                    method: 'POST',
                    body: formData
                });

                if (uploadResponse.status === 200) {
                    resultDiv.innerHTML = `<p style="color:green">Uploaded successfully. OBS path: ${params.key}</p>
                                     <p>The callback notification will be sent to: ${new URLSearchParams(atob(params.callback)).get('callbackUrl')}</p>`;
                } else {
                    const error = await uploadResponse.text(); // Use await.
                    resultDiv.innerHTML = `<p style="color:red">Upload failed. Status code: ${uploadResponse.status}</p>
                                     <p>${error}</p>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<p style="color:red">An error occurred: ${error.message}</p>`;
            }
        });
    });
</script>
</body>
</html>