This topic describes how to use JavaScript to add signatures on the client based on POST policies and then upload data to Object Storage Service (OSS) by using form upload.

Usage notes

  • After you use JavaScript to add signatures on the client, you can directly upload data to OSS. However, your AccessKey ID and AccessKey secret may be exposed because they are included in the JavaScript code. We recommend that you add signatures on the server to upload data. For more information, see Add signatures on the server for object upload or Use a temporary credential provided by STS to access OSS.
  • The application server code provided in this topic supports protocols such as HTML 4, HTML 5, Flash, and Silverlight. Make sure that your browser supports these protocols. If a prompt such as "Your browser does not support Flash, Silverlight, or HTML5!" appears, upgrade your browser.

Step 1: Download the client code running on browsers

Plupload is used in this example to upload form data (PostObject) to OSS. The sample code in JavaScript can be run on WeChat or browsers from computers or mobile phones. You can select multiple objects for uploads and specify the destination directory. In addition, you can specify whether the names of the objects to upload are the same as the names of the local files that you upload or are randomly specified by OSS. You can view the upload progress by using the progress bar.

  1. Download the browser client code.
  2. Decompress the downloaded file.
Note The frontend plug-in used in this example is Plupload. You can change the plug-in.

Step 2: Modify the configuration file

Open the upload.js file and modify access configurations.
// Security risks may arise if you use the AccessKey pair of an Alibaba Cloud account to access OSS because the account has permissions on all API operations. We recommend that you use a Resource Access Management (RAM) user to call API operations or perform routine O&M. To create a RAM user, log on to the RAM console. 
accessid= '<yourAccessKeyId>';
accesskey= <yourAccessKeySecret>';
host= <yourHost>';

.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': accessid, 
        ....
    };

// If you use Security Token Service (STS) access credentials to access OSS, modify the configurations. 
accessid= 'accessid';
accesskey= 'accesskey';
host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com';
STS_ROLE = ''; // eg: acs:ram::1069test7698:role/all

.....
new_multipart_params = {
        ....
        'OSSAccessKeyId': STS.accessID, 
        'x-oss-security-token':STSToken,
        ....
    };
//===========
host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com';
  • accessid: your AccessKey ID.
  • accesskey: your AccessKey secret.
  • STS_ROLE: the Alibaba Cloud Resource Name (ARN) of the specified role. For more information about RoleArn, see AssumeRole.
  • STSToken: your STS token. If you use STS for authentication, you must call the STS API operation to obtain the STS AccessKey ID, STS AcessKey secret, and security token. For more information, see Use a temporary credential provided by STS to access OSS. If your AccessKey ID and AcessKey secret are from an Alibaba Cloud account or a RAM user that has permanent permissions, you can leave this parameter empty.
  • host: your OSS endpoint used to access the bucket. The format is BucketName.Endpoint. Example: post-test.oss-cn-hangzhou.aliyuncs.com. For more information about OSS endpoints, see OSS domain names.

Step 3: Configure CORS

When you use form upload to upload data from the client to OSS, the client includes the Origin header in the request and sends the request from the browser to OSS. OSS verifies whether a request that includes the Origin header is a cross-origin request. Therefore, you must configure cross-origin resource sharing (CORS) rules for the destination bucket to allow POST-based requests.

  1. Log on to the OSS console.
  2. Click Buckets, and then click the name of the target bucket.
  3. Choose Access Control > Cross-Origin Resource Sharing (CORS). In the Cross-Origin Resource Sharing (CORS) section, click Configure.
  4. Click Create Rule. The following figure shows the configurations of a rule.
    Note To ensure data security, we recommend that you specify the actual domain name from which you want OSS to allow requests in Sources. For more information about CORS configurations, see Configure CORS rules.

Step 4: Use JavaScript to add signatures on the client and upload data to OSS

  1. Open the index.html file in the decompressed directory of the client code.
  2. Click Select File. Select one or more files to upload. Then, select a naming convention for the object to upload, and specify the directory in which you want to store the objects.
  3. Click Upload. Wait until the uploads are complete.
  4. After the uploads are complete, you can log on to the OSS console to view the upload results.

Core code analysis

OSS supports POST requests. Therefore, you need to add a signature to a POST request when you use Plupload to send the request. The following code provides an example on the core code:

function set_upload_param(up, filename, ret)
{
  g_object_name = g_dirname;
  if (filename != '') {
      suffix = get_suffix(filename)
      calculate_object_name(filename)
  }
  new_multipart_params = {
      'key' : g_object_name,
      'policy': policyBase64,
      'OSSAccessKeyId': accessid,
      'success_action_status' : '200', // If you do not set success_action_status to 200, 204 status code is returned when the object is uploaded. 
      'signature': signature,
  };

  up.setOption({
      'url': host,
      'multipart_params': new_multipart_params
  });

  up.start();
}
 ....

In the preceding code, 'key': g_object_name indicates the path of the uploaded object. If you want to retain the original name for the uploaded object, set this field to 'key': '${filename}'.

To upload objects to a specified directory such as the abc directory without changing the object names, change part of the preceding code to the following code:

new_multipart_params = {
  'key' : 'abc/' + '${filename}',
  'policy': policyBase64,
  'OSSAccessKeyId': accessid,
  'success_action_status' : '200', // Set success_action_status to 200 so that 200 is returned if the request is successful. By default, if this option is not specified, 204 is returned.
  'signature': signature,
};
  • Specify that uploaded object names are randomly specified by the system

    To instruct the system to randomly specify the name of an uploaded object without changing its name extension, use the following code to modify the function in the preceding code:

    function check_object_radio() {
        g_object_name_type = 'random_name';
    }
  • Specify that the names of uploaded objects remain unchanged

    To retain the original names of the objects, use the following code to modify the function in the preceding code:

    function check_object_radio() {
        g_object_name_type = 'local_name';
    }
  • Configure the destination directory

    You can upload objects to a specified directory. The following code provides an example on how to set the destination directory to abc/. The destination directory must end with a forward slash (/).

    function get_dirname()
    {
        g_dirname = "abc/"; 
    }
  • Sign policyText

    When you upload objects, you must sign policyText. Example:

    var policyText = {
        "expiration": "setDurationSeconds", // Set a proper validity period for the policy in UTC. After the validity period ends, you can not upload objects to OSS by using this policy. 
        "conditions": [
        ["content-length-range", 0, 1048576000] // Set the size limit for the uploaded object. If the uploaded object exceeds the size limit, OSS reports an error. 
        ]
    }

FAQ

  • How do I specify the format of an object to upload?

    You can set conditions for objects to upload by using the filters attributes of Plupload. For example, you can set conditions on the type of images and the size of objects. For more information, see Overview.

  • How do I obtain the URL of an uploaded object?

    You can obtain the URL of an uploaded object based on the endpoint of the destination bucket and the object path. For more information, see How do I obtain the URL of an uploaded object?.

  • How do I obtain the MD5 hash of an uploaded object?

    Open the developer tools of your browser, and then upload an object. After the object is uploaded, you can view the MD5 hash in the response header.

If you have other questions, submit a ticket for help.