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 @Entry 16 @Component 17 struct WebComponent { 18 controller: WebController = new WebController() 19 build() { 20 Column() { 21 // Load the local.html page. 22 Web({ src: $rawfile('local.html'), controller: this.controller }) 23 .onShowFileSelector((event) => { 24 // Set the path of the local file to be uploaded. 25 let fileList: Array<string> = [ 26 'xxx/test.png', 27 ] 28 event.result.handleFileList(fileList) 29 return true; 30 }) 31 } 32 } 33 } 34 ``` 35 36 37- Code of the **local.html** page: 38 39 ```html 40 <!DOCTYPE html> 41 <html> 42 <head> 43 <meta charset="utf-8"> 44 <title>Document</title> 45 </head> 46 47 <body> 48 <!-- Click the Upload button --> 49 <input type="file" value="file"></br> 50 </body> 51 </html> 52 ``` 53
