Help Center> Object Storage Service> PHP> Object Upload> Performing a Browser-Based Upload
Updated on 2023-11-09 GMT+08:00
View PDF

Performing a Browser-Based Upload

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 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->createPostSignature to generate request parameters for browser-based upload. You can also perform a browser-based according to the following procedure:

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

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.

// Import the dependency library.
require 'vendor/autoload.php';
// Import the SDK code library during source code installation.
// require 'obs-autoloader.php';
// Declare the namespace.
use Obs\ObsClient;
// Create an instance of ObsClient.
$obsClient = new ObsClient ( [ 
      //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. For details, see https://support.huaweicloud.com/intl/en-us/usermanual-ca/ca_01_0003.html.
      'key' => getenv('ACCESS_KEY_ID'),
      'secret' => getenv('SECRET_ACCESS_KEY'),
      'endpoint' => 'https://your-endpoint',
      'signature' => 'obs'
] );
       
$resp = $obsClient->createPostSignature([
       // Set the validity period for the browser-based upload request, in seconds.
       'Expires' => 3600,
       // Fill in parameters in the form.
       'FormParams' => [
             // Set the object ACL to public-read.
             'x-obs-acl' => ObsClient::AclPublicRead,               
             // Set the MIME type for the object.
             'content-type' => 'text/plain',
       ]
]);

// Obtain the request parameters.
printf("Policy:%s\n", $resp['Policy']);
printf("Signature:%s\n", $resp['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>
  • Values of policy and signature in the HTML form are obtained from the value returned by ObsClient.createPostSignatureSync.
  • You can directly download the HTML form example: PostDemo.
Parent topic: Object Upload