Tutorial: Direct upload in a HarmonyOS environment

The server generates a signed URL:

const express = require("express");
const mime = require("mime");
const OSS = require("ali-oss");
const app = express();
const port = 3000; // The port to listen on

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.post("/get_sign_url", async (req, res) => {
  const {
    fileName,
    method,
    headers = {},
    queries = {},
    additionalHeaders = [],
  } = req.body; // Parse data from the body
  const client = new OSS({
    region: "yourRegion",
    accessKeyId: "yourstsAccessKey",
    accessKeySecret: "yourstsAccessKeySecret",
    stsToken: "yourSTSToken",
    bucket: "yourBucket",
    authorizationV4: true,
  });

  const reqHeaders = {
    ...headers,
  };

  // Handle the content-type
  if (fileName && method === "PUT") {
    const fileNameSplit = fileName.split(".");

    reqHeaders["content-type"] = mime.getType(
      fileNameSplit.length > 1 ? fileNameSplit[fileNameSplit.length - 1] : ""
    );
  }

  // Generate a V4 signed URL
  const url = await client.signatureUrlV4(
    method,
    300,
    {
      headers: reqHeaders,
      queries,
    },
    fileName,
    additionalHeaders
  );

  res.json({
    url,
    contentType: reqHeaders["content-type"],
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

On the client, obtain the signature and use the signed URL to upload the file:

import { http } from '@kit.NetworkKit';
import fs from '@ohos.file.fs';
import { request } from './request';

const serverUrl = 'http://x.x.x.x:3000/get_sign_url'; // The server URL for getting the signed URL

/**
 * Data returned by getSignUrl
 */
export interface ISignUrlResult {
  /** The signed URL */
  url: string;
  /** content-type */
  contentType?: string;
}

/**
 * Gets the signed URL
 * @param fileName The file name
 * @param req The request information used to generate the V4 signed URL
 * @param req.method The request method
 * @param [req.headers] The request header
 * @param [req.queries] The request query parameters
 * @param [req.additionalHeaders] The request headers to be signed
 */
const getSignUrl = async (fileName: string, req: {
  method: 'GET' | 'POST' | 'PUT';
  headers?: Record<string, string | number>;
  queries?: Record<string, string>;
  additionalHeaders?: string[];
}): Promise<ISignUrlResult> => {
  console.info('in getSignUrl');

  try {
    const response = await request(serverUrl, {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      },
      extraData: {
        fileName,
        method: req.method,
        headers: req.headers,
        queries: req.queries,
        additionalHeaders: req.additionalHeaders
      },
      expectDataType: http.HttpDataType.OBJECT
    }, 200);
    const result = response.result as ISignUrlResult;

    console.info('success getSignUrl');

    return result;
  } catch (err) {
    console.info('getSignUrl request error: ' + JSON.stringify(err));

    throw err;
  }
};

/**
 * PutObject
 * @param fileUri The file URI
 */
const putObject = async (fileUri: string): Promise<void> => {
  console.info('in putObject');

  const fileInfo = await fs.open(fileUri, fs.OpenMode.READ_ONLY);
  const fileStat = await fs.stat(fileInfo.fd);
  let signUrlResult: ISignUrlResult;

  console.info('file name: ', fileInfo.name);

  try {
    // Get the signed URL for PutObject
    signUrlResult = await getSignUrl(fileInfo.name, {
      method: 'PUT',
      headers: {
        'Content-Length': fileStat.size
      },
      additionalHeaders: ['Content-Length']
    });
  } catch (e) {
    await fs.close(fileInfo.fd);

    throw e;
  }

  const data = new ArrayBuffer(fileStat.size);

  await fs.read(fileInfo.fd, data);
  await fs.close(fileInfo.fd);

  try {
    // Use the PutObject method to upload the file
    await request(signUrlResult.url, {
      method: http.RequestMethod.PUT,
      header: {
        'Content-Length': fileStat.size,
        'Content-Type': signUrlResult.contentType
      },
      extraData: data
    }, 200);

    console.info('success putObject');
  } catch (err) {
    console.info('putObject request error: ' + JSON.stringify(err));

    throw err;
  }
};

export {
  getSignUrl,
  putObject
};

Create an OSS Bucket to store files for your web application that are uploaded directly from a browser.

1. Log on to the OSS console.

2. In the navigation pane on the left, click Buckets, and then click Create Bucket.

3. In the Create Bucket panel, select Quick Create and configure the parameters as described in the following table.

   Parameter	Example value
   Bucket Name	web-direct-upload
   Region	China (Hangzhou)

4. Click Create.

Operation 1: Create an ECS instance

Go to the Custom Launch page and create or select the basic resources required to purchase an ECS instance as described in the following sections.

Operation 2: Connect to the ECS instance

1. On the Instances page of the Elastic Compute Service console, find the ECS instance that you created by region and instance ID. In the Actions column, click Connect.

2. In the Connect to Instance dialog box, click Log On Now next to Connect with Workbench.

3. In the Log on to Instance dialog box, set Connection Method to Terminal Connection and Authentication Method to SSH Key Pair. Then, enter or upload the private key file that you downloaded when you created the key pair, and click Log on to log on to the ECS instance with the username ecs-user.

   Note

   The private key file was automatically downloaded to your local machine when you created the key pair. Check your browser's download history to find the .pem private key file.

4. The following page indicates that you have successfully logged on to the ECS instance.

Step 3: Create a RAM role in Resource Access Management

1. Go to the Create Role page in the RAM console.

2. On the Create Role page, select Alibaba Cloud Service.

3. Select the Current Alibaba Cloud account and click OK.

4. Enter a role name, such as oss-web-upload, and click OK.

5. On the RAM role management page, click Copy to save the role ARN.

Operation 4: Create an access policy for file uploads in the RAM console

1. On the Policies page, click Create Policy.

2. On the Create Policy page, click Script Editor and replace <BucketName> in the following script with the bucket name web-direct-upload that you created.

   {
     "Version": "1",
     "Statement": [
       {
         "Effect": "Allow",
         "Action": "oss:PutObject",
         "Resource": "acs:oss:*:*:<BucketName>/*"
       }
     ]
   }

3. Then click OK and enter a policy name.

Operation 5: Grant permissions to the RAM role in the RAM console

1. On the Roles page, find the target RAM role and click Grant Permission in the Actions column.

2. On the Grant Permission page, select Custom Policy and choose the custom permission policy you created.

3. Click Confirm New Authorization.

Operation 6: Attach the RAM role to the ECS instance

1. Go to the Instances page of the ECS console. At the top of the page, select the region where the ECS instance is located. Then, find the target instance, click the icon in the Actions column, and select Attach/Detach RAM Role.

   

2. In the Attach/Detach RAM Role dialog box, select the target RAM Role to attach the RAM role to the ECS instance.

   

Operation 1: Configure dependencies on the ECS server

Run the following commands to install the dependencies required to obtain a temporary access credential.

sudo pip install oss2
sudo pip install alibabacloud_credentials

<!-- https://mvnrepository.com/artifact/com.aliyun/credentials-java -->
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>credentials-java</artifactId>
    <version>0.3.4</version>
</dependency>

<dependency>
    <groupId>com.aliyun.kms</groupId>
    <artifactId>kms-transfer-client</artifactId>
    <version>0.1.0</version>
</dependency>

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.17.4</version>
</dependency>

Operation 2: Obtain a temporary identity credential on the ECS server

Integrate the STS SDK on your business server to obtain a temporary STS identity credential and return it to the requester.

from alibabacloud_credentials.client import Client as CredClient
from alibabacloud_credentials.models import Config as CredConfig

def main():
    # Configure an ECS RAM role as the access credential.
    credentialConfig = CredConfig(
        type='ecs_ram_role',
        role_name='ecs_role_name'       # Specify the name of the RAM role that is attached to the ECS instance.
    )
    credentialsClient = CredClient(credentialConfig)
    credential = credentialsClient.get_credential()

    accesskeyid = credential.access_key_id            # Get the AccessKey ID.
    accesskeysecret = credential.access_key_secret    # Get the AccessKey secret.
    security_token = credential.security_token        # Get the security token.

    print("stsToken:", security_token)
    print("accesskeyid:", accesskeyid)
    print("accesskeysecret:", accesskeysecret)

if __name__ == "__main__":
    main()

import com.aliyun.credentials.models.CredentialModel;
import com.aliyun.oss.common.auth.Credentials;
import com.aliyun.oss.common.auth.CredentialsProvider;
import com.aliyun.oss.common.auth.DefaultCredentials;
import com.aliyun.oss.common.utils.BinaryUtil;

public class vxDemo {
    public static void main(String[] args) {
    
        // Configure an ECS RAM role as the access credential.
        com.aliyun.credentials.models.Config config = new com.aliyun.credentials.models.Config();
        config.setType("ecs_ram_role");
        config.setRoleName("ecs_role_name");   // Specify the name of the RAM role that is attached to the ECS instance.
        final com.aliyun.credentials.Client credentialsClient = new com.aliyun.credentials.Client(config);
        CredentialsProvider credentialsProvider = new CredentialsProvider() {
            @Override
            public void setCredentials(Credentials credentials) {
            }

            @Override
            public Credentials getCredentials() {
                CredentialModel credential = credentialsClient.getCredential();
                return new DefaultCredentials(credential.getAccessKeyId(), credential.getAccessKeySecret(), credential.getSecurityToken());
            }
        };
        String accessKeyId = credentialsProvider.getCredentials().getAccessKeyId();             //Get the AccessKey ID.
        String secretAccessKey = credentialsProvider.getCredentials().getSecretAccessKey();     //Get the AccessKey secret.
        String securityToken = credentialsProvider.getCredentials().getSecurityToken();         //Get the security token.

        // Print the temporary access credential.
        System.out.println("stsToken:" + securityToken);
        System.out.println("accessKeyId:" + accessKeyId);
        System.out.println("accesskeySecret:"+ secretAccessKey);
    }
}

The client sends a POST request to the server that includes the file name, HTTP method, request headers, and query parameters. After the server receives the request, it generates a signed URL using the OSS Client. This URL allows the user to upload the file to OSS.

app.post('/get_sign_url', async (req, res) => {
    const {
        fileName,
        method,
        headers = {},
        queries = {},
        additionalHeaders = []
    } = req.body; // Parse data from the body
    const client = new OSS({
        region: 'yourRegion',
        // Fill in the temporary access credential (accessKeyId, accessKeySecret, and stsToken) returned in Part 2.
        accessKeyId: 'yourstsAccessKey',
        accessKeySecret: 'yourstsAccessKeySecret',
        stsToken: 'yourSTSToken',
        bucket: 'yourBucket',
        authorizationV4: true
    });

    const reqHeaders = {
        ...headers
    };

    // Handle the content-type
    if (fileName && method === 'PUT') {
        const fileNameSplit = fileName.split('.');

        reqHeaders['content-type'] = mime.getType(fileNameSplit.length > 1 ? fileNameSplit[fileNameSplit.length-1] : '');
    }

    // Generate a V4 signed URL
    const url = await client.signatureUrlV4(method, 300, {
        headers: reqHeaders,
        queries
    }, fileName, additionalHeaders);

    res.json({
        url,
        contentType: reqHeaders['content-type']
    });
});

Use the http module of the @kit.NetworkKit library to create an asynchronous function request that sends HTTP requests.

import { http } from '@kit.NetworkKit';

const request = async (url: string, options: http.HttpRequestOptions, successCode: number[] | number) => {
  const httpRequest = http.createHttp();

  try {
    const httpResponse = await httpRequest.request(url, {
      ...options,
      priority: 1,
      connectTimeout: 60000,
      readTimeout: 60000,
      usingProtocol: http.HttpProtocol.HTTP1_1
    });

    if ((Array.isArray(successCode) && successCode.includes(httpResponse.responseCode)) || httpResponse.responseCode === successCode) {
      const requestID = httpResponse.header['x-oss-request-id'];

      console.info(`request success${requestID ? ', oss request ID: ' + requestID : ''}`);

      return httpResponse;
    } else {
      throw {
        code: httpResponse.responseCode,
        result: httpResponse.result.toString(),
        requestID: httpResponse.header['x-oss-request-id']
      };
    }
  } catch (err) {
    console.info('request error: ' + JSON.stringify(err));

    throw err;
  } finally {
    httpRequest.destroy();
  }
};

export {
  request
};

import { common } from '@kit.AbilityKit';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import picker from '@ohos.file.picker';

// Select a file
const fileSelect = async (context: common.Context) => {
  const documentSelectOptions = new picker.DocumentSelectOptions();
  const documentViewPicker = new picker.DocumentViewPicker(context);

  documentSelectOptions.maxSelectNumber = 5;


  const documentSelectResult = await documentViewPicker.select(documentSelectOptions);

  return documentSelectResult;
};

export {
  fileSelect
};

The client sends a request to the server to generate a signed URL. The request body includes the file name, request method, and header. If the request is successful, the signed URL and Content-Type are returned. If the request fails, an error is caught and thrown.

const getSignUrl = async (fileName: string, req: {
  method: 'GET' | 'POST' | 'PUT';
  headers?: Record<string, string | number>;
  queries?: Record<string, string>;
  additionalHeaders?: string[];
}): Promise<ISignUrlResult> => {
  console.info('in getSignUrl');

  try {
    const response = await request(serverUrl, {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      },
      extraData: {
        fileName,
        method: req.method,
        headers: req.headers,
        queries: req.queries,
        additionalHeaders: req.additionalHeaders
      },
      expectDataType: http.HttpDataType.OBJECT
    }, 200);
    const result = response.result as ISignUrlResult;

    console.info('success getSignUrl');

    return result;
  } catch (err) {
    console.info('getSignUrl request error: ' + JSON.stringify(err));

    throw err;
  }
};

Obtain the signed URL generated on the server, and then use the PutObject method to upload the file.

const putObject = async (fileUri: string): Promise<void> => {
  console.info('in putObject');

  const fileInfo = await fs.open(fileUri, fs.OpenMode.READ_ONLY);
  const fileStat = await fs.stat(fileInfo.fd);
  let signUrlResult: ISignUrlResult;

  console.info('file name: ', fileInfo.name);

  try {
    // Get the signed URL for PutObject
    signUrlResult = await getSignUrl(fileInfo.name, {
      method: 'PUT',
      headers: {
        'Content-Length': fileStat.size
      },
      additionalHeaders: ['Content-Length']
    });
  } catch (e) {
    await fs.close(fileInfo.fd);

    throw e;
  }

  const data = new ArrayBuffer(fileStat.size);

  await fs.read(fileInfo.fd, data);
  await fs.close(fileInfo.fd);

  try {
    // Use the PutObject method to upload the file
    await request(signUrlResult.url, {
      method: http.RequestMethod.PUT,
      header: {
        'Content-Length': fileStat.size,
        'Content-Type': signUrlResult.contentType
      },
      extraData: data
    }, 200);

    console.info('success putObject');
  } catch (err) {
    console.info('putObject request error: ' + JSON.stringify(err));

    throw err;
  }
};