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