Uploading Files

The Web component supports file uploading on a frontend page. You can use onShowFileSelector() to process file upload requests sent from a frontend page.

In the following example, when a user clicks the Upload button on the frontend page, the application receives a file upload request through onShowFileSelector(), which carries the path of the local file to be uploaded.

Application code:

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // Load the local.html page.
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) => {
            // Set the path of the local file to be uploaded.
           let fileList: Array<string> = [
              'xxx/test.png',
           ]
           if (event) {
              event.result.handleFileList(fileList)
           }
           return true;
        })
    }
  }
}

Code of the local.html page:

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

<body>
<!-- Click the Upload button -->
<input type="file" value="file"></br>
</body>
</html>