1# Uploading Files
2
3
4The **Web** component supports file uploading on a frontend page. You can use [onShowFileSelector()](../reference/apis-arkweb/ts-basic-components-web.md#onshowfileselector9) to process file upload requests sent from a frontend page. If this API is not used, the **Web** component provides default processing for the requests sent from the frontend page.
5
6
7In the following example, when a user clicks the **Upload** button on the frontend page, the application receives a file upload request through [onShowFileSelector()](../reference/apis-arkweb/ts-basic-components-web.md#onshowfileselector9), which carries the path of the local file to be uploaded.
8
9
10- Application code:
11
12  ```ts
13  // xxx.ets
14  import { webview } from '@kit.ArkWeb';
15  import { BusinessError } from '@kit.BasicServicesKit';
16  import { picker } from '@kit.CoreFileKit';
17
18  @Entry
19  @Component
20  struct WebComponent {
21    controller: webview.WebviewController = new webview.WebviewController();
22
23    build() {
24      Column() {
25        Web({ src: $rawfile('local.html'), controller: this.controller })
26          .onShowFileSelector((event) => {
27            console.log('MyFileUploader onShowFileSelector invoked');
28            const documentSelectOptions = new picker.DocumentSelectOptions();
29            let uri: string | null = null;
30            const documentViewPicker = new picker.DocumentViewPicker();
31            documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
32              uri = documentSelectResult[0];
33              console.info('documentViewPicker.select to file succeed and uri is:' + uri);
34              if (event) {
35                event.result.handleFileList([uri]);
36              }
37            }).catch((err: BusinessError) => {
38              console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
39            })
40            return true;
41          })
42      }
43    }
44  }
45  ```
46
47
48- Code of the **local.html** page:
49
50  ```html
51  <!DOCTYPE html>
52  <html>
53  <head>
54      <meta charset="utf-8">
55      <title>Document</title>
56  </head>
57
58  <body>
59  <!-- Click the Upload button -->
60  <input type="file" value="file"></br>
61  <meta name="viewport" content="width=device-width" />
62  </body>
63  </html>
64  ```
65