1# Uploading Files 2 3 4The **Web** component supports file uploading on a frontend page. You can use [onShowFileSelector()](../reference/arkui-ts/ts-basic-components-web.md#onshowfileselector9) to process file upload requests sent from a 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/arkui-ts/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 web_webview from '@ohos.web.webview'; 15 16 @Entry 17 @Component 18 struct WebComponent { 19 controller: WebController = new WebController() 20 build() { 21 Column() { 22 // Load the local.html page. 23 Web({ src: $rawfile('local.html'), controller: this.controller }) 24 .onShowFileSelector((event) => { 25 // Set the path of the local file to be uploaded. 26 let fileList: Array<string> = [ 27 'xxx/test.png', 28 ] 29 if (event) { 30 event.result.handleFileList(fileList) 31 } 32 return true; 33 }) 34 } 35 } 36 } 37 ``` 38 39 40- Code of the **local.html** page: 41 42 ```html 43 <!DOCTYPE html> 44 <html> 45 <head> 46 <meta charset="utf-8"> 47 <title>Document</title> 48 </head> 49 50 <body> 51 <!-- Click the Upload button --> 52 <input type="file" value="file"></br> 53 </body> 54 </html> 55 ``` 56
