DEV Community

Cover image for Web File Upload, Continuous Click Monitoring in Four Directions, Fold Hover, String Operations, and Sandbox Video Playback
kouwei qing
kouwei qing

Posted on

Web File Upload, Continuous Click Monitoring in Four Directions, Fold Hover, String Operations, and Sandbox Video Playback

#harmonyosnext

[Daily Harmony Learnings on HarmonyOS Next] Web File Upload, Continuous Click Monitoring in Four Directions, Fold Hover, String Operations, and Sandbox Video Playback

1. HarmonyOS: The input[type='file'] in H5 native webview within the APP fails to trigger the phone's upload function?

File upload requires using the corresponding picker.

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-file-upload-V5

The Web component supports file selection and upload for front-end pages. App developers can use the onShowFileSelector() interface to handle file upload requests from front-end pages. If developers do not handle it, the Web will provide default behavior for file uploads.

App-side code example:

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
import { picker } from '@kit.CoreFileKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked');
          const documentSelectOptions = new picker.DocumentSelectOptions();
          let uri: string | null = null;
          const documentViewPicker = new picker.DocumentViewPicker();
          documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
            uri = documentSelectResult[0];
            console.info('documentViewPicker.select to file succeed and uri is:' + uri);
            if (event) {
              event.result.handleFileList([uri]);
            }
          }).catch((err: BusinessError) => {
            console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true;
        })
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

local.html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>
<!-- Click the file upload button -->
<input type="file" value="file"></br>
<meta name="viewport" content="width=device-width" />
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. HarmonyOS: How to monitor continuous clicks in the up/down/left/right areas on the current page?

On a specific page, continuous clicks are used to launch a test page—for example, clicking left-left-left, right-right-right, up-up, down-down within 2 seconds to trigger a function or navigate to a page. How to monitor these events?

Refer to the document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#ZH-CN_TOPIC_0000001884757690__onwillclick12

3. HarmonyOS: For the FolderStack component, how to position a CustomDialog in the lower half of the screen when in fold hover mode?

Refer to the document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-folderstack-V5

It is recommended to use PromptAction.openCustomDialog, which supports dynamic refresh. Listen for the fold hover state, dynamically adjust the dialog height in the builder, and position it in the lower half of the screen with an offset.

PromptAction.openCustomDialog reference: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12

Example:

import { PromptAction, promptAction } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

let promptAction: PromptAction = uiContext.getPromptAction();
try {
  promptAction.showActionMenu({
    title: 'showActionMenu Title Info',
    buttons: [
      {
        text: 'item1',
        color: '#666666'
      },
      {
        text: 'item2',
        color: '#000000'
      },
    ]
  })
    .then(data => {
      console.info('showActionMenu success, click button: ' + data.index);
    })
    .catch((err: Error) => {
      console.error('showActionMenu error: ' + err);
    })
} catch (error) {
  let message = (error as BusinessError).message;
  let code = (error as BusinessError).code;
  console.error(`showActionMenu args error code is ${code}, message is ${message}`);
};
Enter fullscreen mode Exit fullscreen mode

4. HarmonyOS: How to output a string defined in ResourceStr?

A string is defined in the resource file using ResourceStr. To obtain the string content of buttonText and compare it with a server string, how to output the string?

Use the getStringSync method.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-resource-manager-V5#ZH-CN_TOPIC_0000001847052344__getstringsync9-1

Demo:

import resourceManager from '@ohos.resourceManager';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index2 {
  @State message: string = 'Hello World';
  @State buttonText: Resource = $r('app.string.caijiOnly')
  context = getContext(this) as common.UIAbilityContext;

  aboutToAppear(): void {
    let resource: resourceManager.Resource = {
      bundleName: "com.example.mydemo", // Modify to your package name
      moduleName: "entry",
      id: $r('app.string.caijiOnly').id
    };
    try {
      this.context.resourceManager.getStringSync(resource);
      console.log("Official example: " + this.context.resourceManager.getStringSync(resource))
      console.log("buttonText: " + this.context.resourceManager.getStringSync(this.buttonText))

    } catch (error) {
      let code = (error as BusinessError).code;
      let message = (error as BusinessError).message;
      console.error(`getStringSync failed, error code: ${code}, message: ${message}.`);
    }

  }

  build() {
    Column() {
      Text(this.message)
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

5. HarmonyOS: Videos in the app sandbox path cannot be played?

Attempting to play a video using the video component fails when the video is in the app sandbox path. The video shows a black screen, while the same video plays correctly when stored in the rawfile folder. How to play videos in the app sandbox?

Reasons for playback failure:

Due to the sandbox mechanism, each app has its own sandbox, and the app can only access files and resources within its sandbox. The sandbox path is inaccessible outside the app, causing the system to return a "file not found" error when trying to play a video in the sandbox.

Solutions:

  1. Push files via DevEco Studio: Place the required files in the app installation path to ensure access outside the sandbox.
  2. Push files via hdc tool: Use hdc to push files to a location outside the app sandbox (e.g., the device's storage directory), then obtain the media file URI via ContentResolver to play the video.
  3. Path mapping: Understand the mapping between the app sandbox path and the actual physical path visible in the debugging process. For example, the sandbox path /data/storage/el1/bundle maps to the real path /data/app/el1/bundle/public/<PACKAGENAME>.

Top comments (0)