1# @ohos.file.PhotoPickerComponent (PhotoPickerComponent) 2 3The **PhotoPickerComponent** embedded in the UI of an application allows the application to access images or videos in the user directory without any permission. This component grants the application only the read permission. 4The user can directly tap this component to select images or videos. 5 6> **NOTE** 7> 8> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 9 10## Modules to Import 11 12```ts 13import { 14 PhotoPickerComponent, PickerController, PickerOptions, 15 DataType, BaseItemInfo, ItemInfo, PhotoBrowserInfo, AnimatorParams, 16 MaxSelected, ItemType, ClickType, PickerOrientation, 17 SelectMode, PickerColorMode, ReminderMode, MaxCountType, PhotoBrowserRange, PhotoBrowserUIElement, 18 ItemsDeletedCallback, ExceedMaxSeletedCallback, CurrentAlbumDeletedCallback 19} from '@ohos.file.PhotoPickerComponent'; 20``` 21 22## Properties 23 24The [universal properties](../apis-arkui/arkui-ts/ts-universal-attributes-size.md) are supported. 25 26## PhotoPickerComponent 27 28PhotoPickerComponent({ 29 pickerOptions?: PickerOptions, 30 onSelect?: (uri: string) => void, 31 onDeselect?: (uri: string) => void, 32 onItemClicked?: (itemInfo: ItemInfo, clickType: ClickType) => boolean, 33 onEnterPhotoBrowser?: (photoBrowserInfo: PhotoBrowserInfo) => boolean, 34 onExitPhotoBrowser?: (photoBrowserInfo: PhotoBrowserInfo) => boolean, 35 onPickerControllerReady?: () => void, 36 onPhotoBrowserChanged?: (browserItemInfo: BaseItemInfo) => boolean, 37 onSelectedItemsDeleted?: ItemsDeletedCallback, 38 onExceedMaxSelected?: ExceedMaxSeletedCallback, 39 onCurrentAlbumDeleted?: CurrentAlbumDeletedCallback, 40 pickerController: PickerController 41}) 42 43Allows the application to access images or videos in the user directory without any permission. 44 45> **NOTE** 46> 47> If **PhotoPickerComponent** is used with the **Tabs** component, the swipe gestures of the **Tabs** component conflict with those of the photo browser page. To prevent this problem, you can disable the swipe operation for the **Tabs** component in **onEnterPhotoBrowser()** and enable it in **onExitPhotoBrowser()**. This conflict will be resolved in later versions. 48 49**Decorator**: @Component 50 51**Atomic service API**: This API can be used in atomic services since API version 12. 52 53**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 54 55**Parameters** 56 57| Name | Type | Mandatory | Decorator Description | Description | 58|-------------------------|----------------------------------------------------------------------------------|-----|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 59| pickerOptions | [PickerOptions](#pickeroptions) | No | - | Configuration of Picker. | 60| onSelect | (uri: string) => void | No | - | Callback to be invoked when an image is selected by using **PhotoPickerComponent**. This callback returns the URI of the image selected to the application. | 61| onDeselect | (uri: string) => void | No | - | Callback to be invoked when an image is deselected by using **PhotoPickerComponent**. This callback returns the URI of the image deselected to the application. | 62| onItemClicked | (itemInfo: [ItemInfo](#iteminfo), clickType: [ClickType](#clicktype)) => boolean | No | - | Callback to be invoked when an item in a **PhotoPickerComponent** is clicked.<br>For an image (thumbnail item), if **true** is returned, the image is selected. Otherwise, the image is not selected and the URI is not granted with the permission. For a camera item, if **true** is returned, the system camera is started. Otherwise, the camera is not started and the application handles the request. | 63| onEnterPhotoBrowser | (photoBrowserInfo: [PhotoBrowserInfo](#photobrowserinfo)) => boolean | No | - | Callback to be invoked when the photo browser page is displayed. The callback returns photo browser information to the application. | 64| onExitPhotoBrowser | (photoBrowserInfo: [PhotoBrowserInfo](#photobrowserinfo)) => boolean | No | - | Callback to be invoked when the photo browser page exits. The callback returns photo browser information to the application. | 65| onPickerControllerReady | () => void | No | - | Callback to be invoked when **pickerController** is available.<br>The **PickerController** APIs can be called only after this callback is invoked. | 66| onPhotoBrowserChanged | (browserItemInfo: [BaseItemInfo](#baseiteminfo)) => boolean | No | - | Callback to be invoked when the photo browser page is swiped left or right. The callback returns photo browser information to the application. | 67| onSelectedItemsDeleted<sup>13+</sup> | [ItemsDeletedCallback](#itemsdeletedcallback13) | No | - | Callback to be invoked when the selected items are deleted. This callback returns information about the deleted items to the application. | 68| onExceedMaxSelected<sup>13+</sup> | [ExceedMaxSeletedCallback](#exceedmaxseletedcallback13) | No | - | Callback to be invoked when the number of selected media assets exceeds the limit (maximum number of selected images, selected videos, or selected items).<br>- If the number of selected images reaches the maximum but does not reach the maximum count of selected items, **exceedMaxCountType** in the callback is [MaxCountType](#maxcounttype).PHOTO_MAX_COUNT.<br>- If the number of selected videos reaches the maximum but does not reach the maximum count of selected items, **exceedMaxCountType** in the callback is [MaxCountType](#maxcounttype).VIDEO_MAX_COUNT.<br>- If the number of selected media assets reaches the maximum count of selected items, **exceedMaxCountType** in the callback is [MaxCountType](#maxcounttype).TOTAL_MAX_COUNT.| 69| onCurrentAlbumDeleted<sup>13+</sup> | [CurrentAlbumDeletedCallback](#currentalbumdeletedcallback13) | No | - | Callback to be invoked when the current album is deleted.<br>The album is specified by **currentAlbumUri** in pickerContorller.[setData](#setdata)([DataType](#datatype).SET_ALBUM_URI, currentAlbumUri).<br>To refresh the grid page to display the default album after the current album is deleted, you can set the title bar name to the default album name, for example, **Photos and videos**, **Photos**, or **Videos**, and call pickerContorller.[setData](#setdata)([DataType](#datatype).SET_ALBUM_URI, '') with an empty string. | 70| onVideoPlayStateChanged<sup>14+</sup> | [videoPlayStateChangedCallback](#videoplaystatechangedcallback14) | No | - | Callback to be invoked when the video playback state on a photo browser page changes. | 71| pickerController | [PickerController](#pickercontroller) | No | @ObjectLink | Instance used to send data to **PhotoPickerComponent**. | 72 73## PickerOptions 74 75Defines the configuration of Picker. It inherits from [BaseSelectOptions](js-apis-photoAccessHelper.md#baseselectoptions12). 76 77 78 79**Atomic service API**: This API can be used in atomic services since API version 12. 80 81**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 82 83| Name | Type | Mandatory | Description | 84|---------------------------------|-----------------------------------------|-----|--------------------------------------------------------------------------| 85| checkBoxColor | string | No | Background color of the check box. The value is an 8-digit hexadecimal color code. | 86| backgroundColor | string | No | Background color of the Picker grid page. The value is an 8-digit hexadecimal color code. | 87| isRepeatSelectSupported | boolean | No | Whether to support repeat selection of a single image. The value **true** means a single image can be repeatedly selected. | 88| checkboxTextColor | string | No | Text color in the check box. The value is an 8-digit hexadecimal color code. (This capability is not supported currently.) | 89| photoBrowserBackgroundColorMode | [PickerColorMode](#pickercolormode) | No | Background color of the photo browser page. The options are **AUTO**, **LIGHT**, and **DARK**. The default value is **AUTO**. | 90| maxSelectedReminderMode | [ReminderMode](#remindermode) | No | Mode of the reminder when the number of selected items reaches the maximum. The options are **NONE**, **TOAST**, and **MASK**. The default value **TOAST**. | 91| orientation | [PickerOrientation](#pickerorientation) | No | Sliding preview direction of the grid page. The options are **HORIZONTAL** and **VERTICAL**. The default value is **VERTICAL**. (This capability is not supported currently.) | 92| selectMode | [SelectMode](#selectmode) | No | Select mode, which can be **SINGLE_SELECT** or **MULTI_SELECT**. The default value is **MULTI_SELECT**. | 93| maxPhotoSelectNumber | number | No | Maximum number of images that can be selected. The maximum value is **500**, which is limited by **MaxSelected**. | 94| maxVideoSelectNumber | number | No | Maximum number of videos that can be selected. The maximum value is **500**, which is limited by **MaxSelected**. | 95| isSlidingSelectionSupported<sup>13+</sup> | boolean | No | Whether to support sliding selection (selecting multiple items by sliding finger across the screen). It is not supported by default. This parameter is not available for repeat selection. | 96| photoBrowserCheckboxPosition<sup>13+</sup> | [number, number] | No | Position of the check box on the photo browser page. The first parameter specifies the offset in the X direction, and the second parameter specifies the offset in the Y direction. The value range is 0-1, which indicates the offset (from 0% to 100%) to the upper left corner of the component.| 97| gridMargin<sup>14+</sup> | [Margin](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin) | No | Margin of the component on a grid page.| 98| photoBrowserMargin<sup>14+</sup> | [Margin](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md#margin) | No | Margin of the component on a photo browser page.| 99 100## ItemsDeletedCallback<sup>13+</sup> 101 102type ItemsDeletedCallback = (baseItemInfos: Array<BaseItemInfo>) => void 103 104Called when the selected items are deleted. 105 106**Atomic service API**: This API can be used in atomic services since API version 13. 107 108**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 109 110**Parameters** 111 112| Name| Type | Mandatory| Description | 113| -------- |--------------------------------------------| -------- |----------| 114| baseItemInfos | Array<[BaseItemInfo](#baseiteminfo)> | Yes| Basic information about the selected items.| 115 116## ExceedMaxSeletedCallback<sup>13+</sup> 117 118type ExceedMaxSeletedCallback = (exceedMaxCountType: MaxCountType) => void 119 120Called when items are selected after the maximum count has been reached. 121 122**Atomic service API**: This API can be used in atomic services since API version 13. 123 124**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 125 126**Parameters** 127 128| Name| Type | Mandatory| Description | 129| -------- |-------------------------------| -------- |----------------------------------------------| 130| exceedMaxCountType | [MaxCountType](#maxcounttype) | Yes| Type of the maximum count that has been reached. It can be the maximum count of selected images, maximum count of selected videos, or maximum count of selected images and videos.| 131 132## CurrentAlbumDeletedCallback<sup>13+</sup> 133 134type CurrentAlbumDeletedCallback = () => void 135 136Called when the current album is deleted. 137 138**Atomic service API**: This API can be used in atomic services since API version 13. 139 140**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 141 142## videoPlayStateChangedCallback<sup>14+</sup> 143 144type videoPlayStateChangedCallback = (state: VideoPlayerState) => void 145 146Callback to be invoked when the video playback state on a photo browser page changes. 147 148**Atomic service API**: This API can be used in atomic services since API version 14. 149 150**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 151 152## PickerController 153 154Defines an instance used to send data to the **PhotoPickerComponent**. 155 156**Decorator Type**: @Observed 157 158**Atomic service API**: This API can be used in atomic services since API version 12. 159 160**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 161 162### setData 163 164setData(dataType: DataType, data: Object): void 165 166Sends data of the specified type to **PhotoPickerComponent**. 167 168**Atomic service API**: This API can be used in atomic services since API version 12. 169 170**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 171 172**Parameters** 173 174| Name | Type | Mandatory | Description | 175| ------------------------- | ------------------ | ----- | --------------- | 176| dataType | [DataType](#datatype) | Yes| Type of the data to send.| 177| data | Object | Yes| Data to send.| 178 179### setMaxSelected 180 181setMaxSelected(maxSelected: MaxSelected): void 182 183Sets the maximum number of images, videos, or images and videos that can be selected on a real-time basis. 184 185**Atomic service API**: This API can be used in atomic services since API version 12. 186 187**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 188 189**Parameters** 190 191| Name | Type | Mandatory | Description | 192| ------------------------- | ------------------ | ----- | --------------- | 193| maxSelected | [MaxSelected](#maxselected) | Yes| Maximum number of media assets that can be selected at a time.| 194 195### setPhotoBrowserItem 196 197setPhotoBrowserItem(uri: string, photoBrowserRange?: PhotoBrowserRange): void 198 199Switches from the **PhotoPickerComponent** to the photo browser page or from the photo browser page to the image to be viewed. 200 201**Atomic service API**: This API can be used in atomic services since API version 12. 202 203**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 204 205**Parameters** 206 207| Name | Type | Mandatory | Description | 208| ------------------------- | ------------------ | ----- | --------------- | 209| uri | string | Yes| URI of the image to view. Only the images selected by the user are supported.| 210| photoBrowserRange | [PhotoBrowserRange](#photobrowserrange) | No| View range on the photo browser page. The value can be **ALL** or **SELECTED_ONLY**. The default value is **ALL**, which means to view all images and videos.| 211 212### exitPhotoBrowser<sup>13+</sup> 213 214exitPhotoBrowser(): void 215 216Exits the photo browser page. 217 218**Atomic service API**: This API can be used in atomic services since API version 13. 219 220**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 221 222### setPhotoBrowserUIElementVisibility<sup>13+</sup> 223 224setPhotoBrowserUIElementVisibility(elements: Array<PhotoBrowserUIElement>, isVisible: boolean): void 225 226Sets whether other UI elements are visible on the photo browser page. By default, other UI elements are visible. 227 228**Atomic service API**: This API can be used in atomic services since API version 13. 229 230**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 231 232**Parameters** 233 234| Name | Type | Mandatory | Description | 235|-------------|----------------------------------------------------------------| ----- |-------------------| 236| elements | Array<[PhotoBrowserUIElement](#photobrowseruielement13)> | Yes| Other UI elements on the photo browser page.| 237| isVisible | boolean | Yes| Whether the specified UI elements are visible. | 238 239## BaseItemInfo 240 241Represents basic image and video information. 242 243**Atomic service API**: This API can be used in atomic services since API version 12. 244 245**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 246 247| Name | Type | Mandatory | Description | 248|----------|--------|-----|---------------------------------------------------| 249| uri | string | No | Image or video URI. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 250| mimeType | string | No | MIME type of the image or video. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 251| width | number | No | Width of the image or video, in pixels. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 252| height | number | No | Height of the image or video, in pixels. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 253| size | number | No | Size of the image or video, in kilobytes. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 254| duration | number | No | Video duration, in ms. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty.<br>The value **-1** indicates an image.| 255 256## ItemInfo 257 258Represents image and video information. It inherits from **BaseItemInfo** and contains only the parameter **itemType**. 259 260 261 262**Atomic service API**: This API can be used in atomic services since API version 12. 263 264**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 265 266| Name | Type | Mandatory | Description | 267|----------|--------|-----|---------------------------------------------------| 268| itemType | [ItemType](#itemtype) | No | Type of the item, which can be **THUMBNAIL** or **CAMERA**. | 269 270## PhotoBrowserInfo 271 272Represents information about the photo browser page. 273 274**Atomic service API**: This API can be used in atomic services since API version 12. 275 276**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 277 278| Name | Type | Mandatory | Description | 279|----------|--------|-----|---------| 280| animatorParams | [AnimatorParams](#animatorparams) | No | Animation for entering or exiting the photo browser page.| 281 282## AnimatorParams 283 284Animation parameters for entering or exiting the photo browser page. 285 286**Atomic service API**: This API can be used in atomic services since API version 12. 287 288**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 289 290| Name | Type | Mandatory | Description | 291|----------|--------|-----|--------------| 292| duration | number | No | Animation duration, in ms.| 293| curve | [Curve](../apis-arkui/js-apis-curve.md#curve) | [ICurve](../apis-arkui/js-apis-curve.md#icurve9) | string | No | Animation curve. | 294 295## MaxSelected 296 297Represents the maximum number of media assets that can be selected at a time. 298 299**Atomic service API**: This API can be used in atomic services since API version 12. 300 301**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 302 303| Name | Type | Mandatory | Description | 304|----------|--------|-----|---------| 305| data | Map<[MaxCountType](#maxcounttype), number> | No | Maximum number of media assets (images, videos, or both) that can be selected at a time.| 306 307## DataType 308 309Enumerates the types of data sent from **PickerController** to the **PhotoPickerComponent**. 310 311**Atomic service API**: This API can be used in atomic services since API version 12. 312 313**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 314 315| Name | Value | Description | 316|-------------------|-----|--------------------------------------------------------------------------------------------------------------------| 317| SET_SELECTED_URIS | 1 | Send a list of selected items to instruct the **PhotoPickerComponent** to refresh the selection status. A string array needs to be passed in.<br>For example, after an image is deleted from an application's page, the application calls **setData()** to notify the **PhotoPickerComponent** of the remaining selected items. Then, the **PhotoPickerComponent** refreshes the check box status.| 318| SET_ALBUM_URI | 2 | Maximum number of images, videos, and total media assets that can be selected.| 319 320## ItemType 321 322Enumerates the types of the item clicked. 323 324**Atomic service API**: This API can be used in atomic services since API version 12. 325 326**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 327 328| Name | Value | Description | 329|-------------------|-----|------------| 330| THUMBNAIL | 0 | Image or video (thumbnail).| 331| CAMERA | 1 | Camera item. | 332 333## ClickType 334 335Enumerates the click operation types. 336 337**Atomic service API**: This API can be used in atomic services since API version 12. 338 339**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 340 341| Name | Value | Description | 342|-------------------|-----|------------------------| 343| SELECTED | 0 | Select (select an image or click a camera item).| 344| DESELECTED | 1 | Deselect (deselect an image). | 345 346## PickerOrientation 347 348Enumerates the sliding preview directions of the Picker grid page. (This capability is not supported currently.) 349 350**Atomic service API**: This API can be used in atomic services since API version 12. 351 352**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 353 354| Name | Value | Description | 355|-------------------|-----|-------| 356| VERTICAL | 0 | Vertical direction.| 357| HORIZONTAL | 1 | Horizontal direction.| 358 359## SelectMode 360 361Enumerates the select modes. 362 363**Atomic service API**: This API can be used in atomic services since API version 12. 364 365**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 366 367| Name | Value | Description | 368|-------------------|-----|-------| 369| SINGLE_SELECT | 0 | Select a single option.| 370| MULTI_SELECT | 1 | Select multiple options.| 371 372## PickerColorMode 373 374Enumerates the Picker color modes. 375 376**Atomic service API**: This API can be used in atomic services since API version 12. 377 378**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 379 380| Name | Value | Description | 381|-------------------|-----|-------| 382| AUTO | 0 | Same with the system.| 383| LIGHT | 1 | Light mode.| 384| DARK | 2 | Dark mode.| 385 386## ReminderMode 387 388Enumerates the types of the reminder when the number of selected items reaches the maximum. 389 390**Atomic service API**: This API can be used in atomic services since API version 12. 391 392**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 393 394| Name | Value | Description | 395|-------------------|-----|-----------| 396| NONE | 0 | No reminder. | 397| TOAST | 1 | Toast message.| 398| MASK | 2 | Grayed-out hint. | 399 400## MaxCountType 401 402Enumerates the types of the maximum count. 403 404**Atomic service API**: This API can be used in atomic services since API version 12. 405 406**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 407 408| Name | Value | Description | 409|-------------------|-----|---------------------------| 410| TOTAL_MAX_COUNT | 0 | Total number of media assets (images and videos) that can be selected. | 411| PHOTO_MAX_COUNT | 1 | Total number of images that can be selected. The value cannot be greater than **Total_MAX_Count**.| 412| VIDEO_MAX_COUNT | 2 | Total number of videos that can be selected. The value cannot be greater than **Total_MAX_Count**.| 413 414## PhotoBrowserRange 415 416Enumerates the view range on the photo browser page. 417 418**Atomic service API**: This API can be used in atomic services since API version 12. 419 420**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 421 422| Name | Value | Description | 423|-------------------|-----|---------------------------| 424| ALL | 0 | View all images and videos. | 425| SELECTED_ONLY | 1 | View selected images and videos only.| 426 427## PhotoBrowserUIElement<sup>13+</sup> 428 429Represents other UI elements except the image preview component on the photo browser page. 430 431**Atomic service API**: This API can be used in atomic services since API version 13. 432 433**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 434 435| Name | Value | Description | 436|-------------|-----|----------| 437| CHECKBOX | 0 | Check box on the photo browser page. | 438| BACK_BUTTON | 1 | **Back** button on the photo browser page.| 439 440## VideoPlayerState<sup>14+</sup> 441 442Enumerates the video playback states. 443 444**Atomic service API**: This API can be used in atomic services since API version 14. 445 446**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 447 448| Name | Value | Description | 449|-------------------|-----|---------------------------| 450| PLAYING | 0 | The video is being played. | 451| PAUSED | 1 | Video playback is paused.| 452| STOPPED | 2 | Video playback is stopped.| 453| SEEK_START | 3 | Started dragging the progress bar.| 454| SEEK_FINSH | 4 | Finished dragging the progress bar.| 455 456## Example 457 458```ts 459// xxx.ets 460import { 461 PhotoPickerComponent, 462 PickerController, 463 PickerOptions, 464 DataType, 465 BaseItemInfo, 466 ItemInfo, 467 PhotoBrowserInfo, 468 AnimatorParams, 469 MaxSelected, 470 ItemType, 471 ClickType, 472 PickerOrientation, 473 SelectMode, 474 PickerColorMode, 475 ReminderMode, 476 MaxCountType, 477 PhotoBrowserRange, 478 PhotoBrowserUIElement, 479 ItemsDeletedCallback, 480 ExceedMaxSelectedCallback, 481 CurrentAlbumDeletedCallback, 482 videoPlayStateChangedCallback 483} from '@ohos.file.PhotoPickerComponent'; 484import photoAccessHelper from '@ohos.file.photoAccessHelper'; 485 486@Entry 487@Component 488struct PickerDemo { 489 pickerOptions: PickerOptions = new PickerOptions(); 490 @State pickerController: PickerController = new PickerController(); 491 @State selectUris: Array<string> = new Array<string>(); 492 @State currentUri: string = ''; 493 @State isBrowserShow: boolean = false; 494 private selectedItemsDeletedCallback: ItemsDeletedCallback = 495 (baseItemInfos: Array<BaseItemInfo>) => this.onSelectedItemsDeleted(baseItemInfos); 496 private exceedMaxSeletedCallback: ExceedMaxSelectedCallback = 497 (exceedMaxCountType: MaxCountType) => this.onExceedMaxSelected(exceedMaxCountType); 498 private currentAlbumDeletedCallback: CurrentAlbumDeletedCallback = () => this.onCurrentAlbumDeleted(); 499 private videoPlayStateChangedCallback: videoPlayStateChangedCallback = () => this.videoPlayStateChanged(); 500 501 aboutToAppear() { 502 this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 503 this.pickerOptions.maxSelectNumber = 5; 504 this.pickerOptions.isSearchSupported = false; 505 this.pickerOptions.isPhotoTakingSupported = false; 506 this.pickerOptions.photoBrowserCheckboxPosition = [0.5, 0.5]; 507 // Other attributes 508 } 509 510 private onSelect(uri: string): void { 511 // Add 512 if (uri) { 513 this.selectUris.push(uri); 514 } 515 } 516 517 private onDeselect(uri: string): void { 518 // Remove 519 if (uri) { 520 this.selectUris = this.selectUris.filter((item: string) => { 521 return item != uri; 522 }) 523 } 524 } 525 526 private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean { 527 if (!itemInfo) { 528 return false; 529 } 530 let type: ItemType | undefined = itemInfo.itemType; 531 let uri: string | undefined = itemInfo.uri; 532 if (type === ItemType.CAMERA) { 533 // Click a camera item. 534 return true; // If true is returned, the system camera is started. If false is returned, the app processes its services. 535 } else { 536 if (clickType === ClickType.SELECTED) { 537 // The application processes its services. 538 if (uri) { 539 this.selectUris.push(uri); 540 this.pickerOptions.preselectedUris = [...this.selectUris]; 541 } 542 return true; // If true is returned, the check box is selected. Otherwise, the check box is not selected. 543 } else { 544 if (uri) { 545 this.selectUris = this.selectUris.filter((item: string) => { 546 return item != uri; 547 }); 548 this.pickerOptions.preselectedUris = [...this.selectUris]; 549 } 550 } 551 return true; 552 } 553 } 554 555 private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 556 // Callback to be invoked when the photo browser page is displayed. 557 this.isBrowserShow = true; 558 return true; 559 } 560 561 private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 562 // Callback to be invoked when the photo browser page is closed. 563 this.isBrowserShow = false; 564 return true; 565 } 566 567 private onPickerControllerReady(): void { 568 // After the callback is called, pickerController APIs can be called to send data to Picker. Before the callback is called, pickerController APIs do not take effect. 569 let elements: number[] = [PhotoBrowserUIElement.BACK_BUTTON]; 570 this.pickerController.setPhotoBrowserUIElementVisibility(elements, false); // Hide the Back button on the photo browser page. 571 } 572 573 private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean { 574 // Callback to be invoked when the photo browser is swiped left or right. 575 this.currentUri = browserItemInfo.uri ?? ''; 576 return true; 577 } 578 579 private onSelectedItemsDeleted(baseItemInfos: Array<BaseItemInfo>): void { 580 // Callback to be invoked when the selected image is deleted. 581 } 582 583 private onExceedMaxSelected(exceedMaxCountType: MaxCountType): void { 584 // Callback to be invoked when the number of selected items exceeds the maximum. 585 } 586 587 private onCurrentAlbumDeleted(): void { 588 // Callback to be invoked when the current album is deleted. 589 } 590 591 private videoPlayStateChanged(stata: videoPlayerState): void { 592 // Called when the video playback state changes. 593 } 594 build() { 595 Flex({ 596 direction: FlexDirection.Column, 597 justifyContent: FlexAlign.Center, 598 alignItems: ItemAlign.Center 599 }) { 600 Column() { 601 if (this.isBrowserShow) { 602 // Back button of the application on the photo browser page. 603 Row() { 604 Button("Exit photo browser page").width('33%').height('8%').onClick(() => { 605 this.pickerController.exitPhotoBrowser(); 606 }) 607 }.margin({ bottom: 20 }) 608 } 609 610 PhotoPickerComponent({ 611 pickerOptions: this.pickerOptions, 612 // onSelect: (uri: string): void => this.onSelect(uri), 613 // onDeselect: (uri: string): void => this.onDeselect(uri), 614 onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, 615 clickType), // This API can replace the preceding two APIs. 616 onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo), 617 onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo), 618 onPickerControllerReady: (): void => this.onPickerControllerReady(), 619 onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo), 620 onSelectedItemsDeleted: this.selectedItemsDeletedCallback, 621 onExceedMaxSelected: this.exceedMaxSeletedCallback, 622 onCurrentAlbumDeleted: this.currentAlbumDeletedCallback, 623 onVideoPlayStateChanged: this.videoPlayStateChangedCallback, 624 pickerController: this.pickerController, 625 }).height('60%').width('100%') 626 627 // Simulate the selection bar at the bottom of the application. 628 if (this.isBrowserShow) { 629 Row() { 630 ForEach(this.selectUris, (uri: string) => { 631 if (uri === this.currentUri) { 632 Image(uri) 633 .height('10%') 634 .width('10%') 635 .onClick(() => { 636 }) 637 .borderWidth(1) 638 .borderColor('red') 639 } else { 640 Image(uri).height('10%').width('10%').onClick(() => { 641 this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris); 642 this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL); 643 }) 644 } 645 }, (uri: string) => JSON.stringify(uri)) 646 } 647 } else { 648 Button('Preview').width('33%').height('5%').onClick(() => { 649 if (this.selectUris.length > 0) { 650 this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY); 651 } 652 }) 653 } 654 } 655 } 656 } 657} 658``` 659