1e41f4b71Sopenharmony_ci# Uploading Files 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciThe **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. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciIn 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. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci- Application code: 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci ```ts 13e41f4b71Sopenharmony_ci // xxx.ets 14e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 15e41f4b71Sopenharmony_ci import { BusinessError } from '@kit.BasicServicesKit'; 16e41f4b71Sopenharmony_ci import { picker } from '@kit.CoreFileKit'; 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci @Entry 19e41f4b71Sopenharmony_ci @Component 20e41f4b71Sopenharmony_ci struct WebComponent { 21e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci build() { 24e41f4b71Sopenharmony_ci Column() { 25e41f4b71Sopenharmony_ci Web({ src: $rawfile('local.html'), controller: this.controller }) 26e41f4b71Sopenharmony_ci .onShowFileSelector((event) => { 27e41f4b71Sopenharmony_ci console.log('MyFileUploader onShowFileSelector invoked'); 28e41f4b71Sopenharmony_ci const documentSelectOptions = new picker.DocumentSelectOptions(); 29e41f4b71Sopenharmony_ci let uri: string | null = null; 30e41f4b71Sopenharmony_ci const documentViewPicker = new picker.DocumentViewPicker(); 31e41f4b71Sopenharmony_ci documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => { 32e41f4b71Sopenharmony_ci uri = documentSelectResult[0]; 33e41f4b71Sopenharmony_ci console.info('documentViewPicker.select to file succeed and uri is:' + uri); 34e41f4b71Sopenharmony_ci if (event) { 35e41f4b71Sopenharmony_ci event.result.handleFileList([uri]); 36e41f4b71Sopenharmony_ci } 37e41f4b71Sopenharmony_ci }).catch((err: BusinessError) => { 38e41f4b71Sopenharmony_ci console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 39e41f4b71Sopenharmony_ci }) 40e41f4b71Sopenharmony_ci return true; 41e41f4b71Sopenharmony_ci }) 42e41f4b71Sopenharmony_ci } 43e41f4b71Sopenharmony_ci } 44e41f4b71Sopenharmony_ci } 45e41f4b71Sopenharmony_ci ``` 46e41f4b71Sopenharmony_ci 47e41f4b71Sopenharmony_ci 48e41f4b71Sopenharmony_ci- Code of the **local.html** page: 49e41f4b71Sopenharmony_ci 50e41f4b71Sopenharmony_ci ```html 51e41f4b71Sopenharmony_ci <!DOCTYPE html> 52e41f4b71Sopenharmony_ci <html> 53e41f4b71Sopenharmony_ci <head> 54e41f4b71Sopenharmony_ci <meta charset="utf-8"> 55e41f4b71Sopenharmony_ci <title>Document</title> 56e41f4b71Sopenharmony_ci </head> 57e41f4b71Sopenharmony_ci 58e41f4b71Sopenharmony_ci <body> 59e41f4b71Sopenharmony_ci <!-- Click the Upload button --> 60e41f4b71Sopenharmony_ci <input type="file" value="file"></br> 61e41f4b71Sopenharmony_ci <meta name="viewport" content="width=device-width" /> 62e41f4b71Sopenharmony_ci </body> 63e41f4b71Sopenharmony_ci </html> 64e41f4b71Sopenharmony_ci ``` 65