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, ExceedMaxSelectedCallback, CurrentAlbumDeletedCallback 19} from '@ohos.file.PhotoPickerComponent'; 20``` 21 22## Properties 23 24The [universal properties](../apis-arkui/arkui-ts/ts-component-general-attributes.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?: ExceedMaxSelectedCallback, 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> | [ExceedMaxSelectedCallback](#exceedmaxselectedcallback13) | 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 the **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 sliding selection (selecting multiple items by sliding finger across the screen) is supported. The value **true** means that sliding selection is supported, and **false** means the opposite. The default value is **false**. 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## ExceedMaxSelectedCallback<sup>13+</sup> 117 118type ExceedMaxSelectedCallback = (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### replacePhotoPickerPreview<sup>15+</sup> 240 241replacePhotoPickerPreview(originalUri: string, newUri: string, callback: AsyncCallback<void>): void 242 243Replaces the image selected by the user in the **PhotoPickerComponent** with the image edited by the application. 244 245**Atomic service API**: This API can be used in atomic services since API version 15. 246 247**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 248 249**Parameters** 250 251| Name | Type | Mandatory | Description | 252|-------------|----------------------------| -------------- |-------------------| 253| originalUri | string | Yes| URI of the original image, which will be replaced.| 254| newUri | boolean | Yes| URI of the new image. The new image is temporarily stored in the application sandbox path. Therefore, this URI specifies a directory in the application sandbox path. | 255| callback | AsyncCallback<void> | Yes| Callback invoked when image replacement is complete. | 256 257### saveTrustedPhotoAssets<sup>15+</sup> 258 259saveTrustedPhotoAssets(trustedUris: Array<string>, callback: AsyncCallback<Array<string>>, configs?: Array<photoAccessHelper.PhotoCreationConfig>, saveMode?: SaveMode): void 260 261Saves files in a URI list. Generally, this API is used together with [replacePhotoPickerPreview](#replacephotopickerpreview15) to save the new images or videos in the application sandbox path to Gallery. 262 263**Atomic service API**: This API can be used in atomic services since API version 15. 264 265**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 266 267**Parameters** 268 269| Name | Type | Mandatory | Description | 270|-------------|----------------------------------------------------------------| ----- |-------------------| 271| trustedUris | Array<string> | Yes| URIs of the images or videos in the application sandbox path. Generally, **trustedUris** comes from **newUri** of new images generated by [replacePhotoPickerPreview](#replacephotopickerpreview15).| 272| callback | AsyncCallback<Array<string>> | Yes| URIs of the new files in Gallery. | 273| configs | Array<[photoAccessHelper.PhotoCreationConfig](js-apis-photoAccessHelper.md#photocreationconfig12)> | No| Configuration parameters corresponding to the original files. | 274| saveMode | [SaveMode](#savemode15) | No| Mode for saving the files. | 275 276## BaseItemInfo 277 278Represents basic image and video information. 279 280**Atomic service API**: This API can be used in atomic services since API version 12. 281 282**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 283 284| Name | Type | Mandatory | Description | 285|----------|--------|-----|---------------------------------------------------| 286| uri | string | No | Image or video URI. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 287| mimeType | string | No | MIME type of the image or video. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 288| width | number | No | Width of the image or video, in pixels. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 289| height | number | No | Height of the image or video, in pixels. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 290| size | number | No | Size of the image or video, in kilobytes. This parameter is mandatory when **itemType** is **THUMBNAIL**. Otherwise, it is left empty. | 291| 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.| 292 293## ItemInfo 294 295Represents image and video information. It inherits from **BaseItemInfo** and contains only the parameter **itemType**. 296 297 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| itemType | [ItemType](#itemtype) | No | Type of the item, which can be **THUMBNAIL** or **CAMERA**. | 306 307## PhotoBrowserInfo 308 309Represents information about the photo browser page. 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 | Type | Mandatory | Description | 316|----------|--------|-----|---------| 317| animatorParams | [AnimatorParams](#animatorparams) | No | Animation for entering or exiting the photo browser page.| 318 319## AnimatorParams 320 321Animation parameters for entering or exiting the photo browser page. 322 323**Atomic service API**: This API can be used in atomic services since API version 12. 324 325**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 326 327| Name | Type | Mandatory | Description | 328|----------|--------|-----|--------------| 329| duration | number | No | Animation duration, in ms.| 330| curve | [Curve](../apis-arkui/js-apis-curve.md#curve) | [ICurve](../apis-arkui/js-apis-curve.md#icurve9) | string | No | Animation curve. | 331 332## MaxSelected 333 334Represents the maximum number of media assets that can be selected at a time. 335 336**Atomic service API**: This API can be used in atomic services since API version 12. 337 338**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 339 340| Name | Type | Mandatory | Description | 341|----------|--------|-----|---------| 342| data | Map<[MaxCountType](#maxcounttype), number> | No | Maximum number of media assets (images, videos, or both) that can be selected at a time.| 343 344## DataType 345 346Enumerates the types of data sent from **PickerController** to the **PhotoPickerComponent**. 347 348**Atomic service API**: This API can be used in atomic services since API version 12. 349 350**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 351 352| Name | Value | Description | 353|-------------------|-----|--------------------------------------------------------------------------------------------------------------------| 354| 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.| 355| SET_ALBUM_URI | 2 | Maximum number of images, videos, and total media assets that can be selected.| 356 357## ItemType 358 359Enumerates the types of the item clicked. 360 361**Atomic service API**: This API can be used in atomic services since API version 12. 362 363**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 364 365| Name | Value | Description | 366|-------------------|-----|------------| 367| THUMBNAIL | 0 | Image or video (thumbnail).| 368| CAMERA | 1 | Camera item. | 369 370## ClickType 371 372Enumerates the click operation types. 373 374**Atomic service API**: This API can be used in atomic services since API version 12. 375 376**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 377 378| Name | Value | Description | 379|-------------------|-----|------------------------| 380| SELECTED | 0 | Select (select an image or click a camera item).| 381| DESELECTED | 1 | Deselect (deselect an image). | 382 383## PickerOrientation 384 385Enumerates the sliding preview directions of the Picker grid page. (This capability is not supported currently.) 386 387**Atomic service API**: This API can be used in atomic services since API version 12. 388 389**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 390 391| Name | Value | Description | 392|-------------------|-----|-------| 393| VERTICAL | 0 | Vertical direction.| 394| HORIZONTAL | 1 | Horizontal direction.| 395 396## SelectMode 397 398Enumerates the select modes. 399 400**Atomic service API**: This API can be used in atomic services since API version 12. 401 402**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 403 404| Name | Value | Description | 405|-------------------|-----|-------| 406| SINGLE_SELECT | 0 | Select a single option.| 407| MULTI_SELECT | 1 | Select multiple options.| 408 409## PickerColorMode 410 411Enumerates the Picker color modes. 412 413**Atomic service API**: This API can be used in atomic services since API version 12. 414 415**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 416 417| Name | Value | Description | 418|-------------------|-----|-------| 419| AUTO | 0 | Same with the system.| 420| LIGHT | 1 | Light mode.| 421| DARK | 2 | Dark mode.| 422 423## ReminderMode 424 425Enumerates the types of the reminder when the number of selected items reaches the maximum. 426 427**Atomic service API**: This API can be used in atomic services since API version 12. 428 429**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 430 431| Name | Value | Description | 432|-------------------|-----|-----------| 433| NONE | 0 | No reminder. | 434| TOAST | 1 | Toast message.| 435| MASK | 2 | Grayed-out hint. | 436 437## MaxCountType 438 439Enumerates the types of the maximum count. 440 441**Atomic service API**: This API can be used in atomic services since API version 12. 442 443**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 444 445| Name | Value | Description | 446|-------------------|-----|---------------------------| 447| TOTAL_MAX_COUNT | 0 | Total number of media assets (images and videos) that can be selected. | 448| PHOTO_MAX_COUNT | 1 | Total number of images that can be selected. The value cannot be greater than **Total_MAX_Count**.| 449| VIDEO_MAX_COUNT | 2 | Total number of videos that can be selected. The value cannot be greater than **Total_MAX_Count**.| 450 451## PhotoBrowserRange 452 453Enumerates the view range on the photo browser page. 454 455**Atomic service API**: This API can be used in atomic services since API version 12. 456 457**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 458 459| Name | Value | Description | 460|-------------------|-----|---------------------------| 461| ALL | 0 | View all images and videos. | 462| SELECTED_ONLY | 1 | View selected images and videos only.| 463 464## PhotoBrowserUIElement<sup>13+</sup> 465 466Represents other UI elements except the image preview component on the photo browser page. 467 468**Atomic service API**: This API can be used in atomic services since API version 13. 469 470**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 471 472| Name | Value | Description | 473|-------------|-----|----------| 474| CHECKBOX | 0 | Check box on the photo browser page. | 475| BACK_BUTTON | 1 | **Back** button on the photo browser page.| 476 477## SaveMode<sup>15+</sup> 478 479Enumerates the modes for saving images or videos. 480 481**Atomic service API**: This API can be used in atomic services since API version 15. 482 483**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 484 485| Name | Value | Description | 486|-------------|-----|----------| 487| SAVE_AS | 0 | Saves the image or video as a new one. | 488| OVERWRITE | 1 | Replaces the original image or video. After the replacements, you can roll back the saved content in Gallery to restore the original image or video.| 489 490## VideoPlayerState<sup>14+</sup> 491 492Enumerates the video playback states. 493 494**Atomic service API**: This API can be used in atomic services since API version 14. 495 496**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 497 498| Name | Value | Description | 499|-------------------|-----|---------------------------| 500| PLAYING | 0 | The video is being played. | 501| PAUSED | 1 | Video playback is paused.| 502| STOPPED | 2 | Video playback is stopped.| 503| SEEK_START | 3 | Started dragging the progress bar.| 504| SEEK_FINSH | 4 | Finished dragging the progress bar.| 505 506## Example 507 508```ts 509// xxx.ets 510import { 511 PhotoPickerComponent, 512 PickerController, 513 PickerOptions, 514 DataType, 515 BaseItemInfo, 516 ItemInfo, 517 PhotoBrowserInfo, 518 AnimatorParams, 519 MaxSelected, 520 ItemType, 521 ClickType, 522 PickerOrientation, 523 SelectMode, 524 PickerColorMode, 525 ReminderMode, 526 MaxCountType, 527 PhotoBrowserRange, 528 PhotoBrowserUIElement, 529 ItemsDeletedCallback, 530 ExceedMaxSelectedCallback, 531 CurrentAlbumDeletedCallback, 532 videoPlayStateChangedCallback 533} from '@ohos.file.PhotoPickerComponent'; 534import photoAccessHelper from '@ohos.file.photoAccessHelper'; 535 536@Entry 537@Component 538struct PickerDemo { 539 pickerOptions: PickerOptions = new PickerOptions(); 540 @State pickerController: PickerController = new PickerController(); 541 @State selectUris: Array<string> = new Array<string>(); 542 @State currentUri: string = ''; 543 @State isBrowserShow: boolean = false; 544 private selectedItemsDeletedCallback: ItemsDeletedCallback = 545 (baseItemInfos: Array<BaseItemInfo>) => this.onSelectedItemsDeleted(baseItemInfos); 546 private exceedMaxSelectedCallback: ExceedMaxSelectedCallback = 547 (exceedMaxCountType: MaxCountType) => this.onExceedMaxSelected(exceedMaxCountType); 548 private currentAlbumDeletedCallback: CurrentAlbumDeletedCallback = () => this.onCurrentAlbumDeleted(); 549 private videoPlayStateChangedCallback: videoPlayStateChangedCallback = () => this.videoPlayStateChanged(); 550 551 aboutToAppear() { 552 this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 553 this.pickerOptions.maxSelectNumber = 5; 554 this.pickerOptions.isSearchSupported = false; 555 this.pickerOptions.isPhotoTakingSupported = false; 556 this.pickerOptions.photoBrowserCheckboxPosition = [0.5, 0.5]; 557 // Other attributes 558 } 559 560 private onSelect(uri: string): void { 561 // Add 562 if (uri) { 563 this.selectUris.push(uri); 564 } 565 } 566 567 private onDeselect(uri: string): void { 568 // Remove 569 if (uri) { 570 this.selectUris = this.selectUris.filter((item: string) => { 571 return item != uri; 572 }) 573 } 574 } 575 576 private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean { 577 if (!itemInfo) { 578 return false; 579 } 580 let type: ItemType | undefined = itemInfo.itemType; 581 let uri: string | undefined = itemInfo.uri; 582 if (type === ItemType.CAMERA) { 583 // Click a camera item. 584 return true; // If true is returned, the system camera is started. If false is returned, the app processes its services. 585 } else { 586 if (clickType === ClickType.SELECTED) { 587 // The application processes its services. 588 if (uri) { 589 this.selectUris.push(uri); 590 this.pickerOptions.preselectedUris = [...this.selectUris]; 591 } 592 return true; // If true is returned, the check box is selected. Otherwise, the check box is not selected. 593 } else { 594 if (uri) { 595 this.selectUris = this.selectUris.filter((item: string) => { 596 return item != uri; 597 }); 598 this.pickerOptions.preselectedUris = [...this.selectUris]; 599 } 600 } 601 return true; 602 } 603 } 604 605 private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 606 // Callback to be invoked when the photo browser page is displayed. 607 this.isBrowserShow = true; 608 return true; 609 } 610 611 private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 612 // Callback to be invoked when the photo browser page is closed. 613 this.isBrowserShow = false; 614 return true; 615 } 616 617 private onPickerControllerReady(): void { 618 // 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. 619 let elements: number[] = [PhotoBrowserUIElement.BACK_BUTTON]; 620 this.pickerController.setPhotoBrowserUIElementVisibility(elements, false); // Hide the Back button on the photo browser page. 621 } 622 623 private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean { 624 // Callback to be invoked when the photo browser is swiped left or right. 625 this.currentUri = browserItemInfo.uri ?? ''; 626 return true; 627 } 628 629 private onSelectedItemsDeleted(baseItemInfos: Array<BaseItemInfo>): void { 630 // Callback to be invoked when the selected image is deleted. 631 } 632 633 private onExceedMaxSelected(exceedMaxCountType: MaxCountType): void { 634 // Callback to be invoked when the number of selected items exceeds the maximum. 635 } 636 637 private onCurrentAlbumDeleted(): void { 638 // Callback to be invoked when the current album is deleted. 639 } 640 641 private videoPlayStateChanged(stata: videoPlayerState): void { 642 // Called when the video playback state changes. 643 } 644 build() { 645 Flex({ 646 direction: FlexDirection.Column, 647 justifyContent: FlexAlign.Center, 648 alignItems: ItemAlign.Center 649 }) { 650 Column() { 651 if (this.isBrowserShow) { 652 // Back button of the application on the photo browser page. 653 Row() { 654 Button("Exit photo browser page").width('33%').height('8%').onClick(() => { 655 this.pickerController.exitPhotoBrowser(); 656 }) 657 }.margin({ bottom: 20 }) 658 } 659 660 PhotoPickerComponent({ 661 pickerOptions: this.pickerOptions, 662 // onSelect: (uri: string): void => this.onSelect(uri), 663 // onDeselect: (uri: string): void => this.onDeselect(uri), 664 onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, 665 clickType), // This API can replace the preceding two APIs. 666 onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo), 667 onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo), 668 onPickerControllerReady: (): void => this.onPickerControllerReady(), 669 onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo), 670 onSelectedItemsDeleted: this.selectedItemsDeletedCallback, 671 onExceedMaxSelected: this.exceedMaxSelectedCallback, 672 onCurrentAlbumDeleted: this.currentAlbumDeletedCallback, 673 onVideoPlayStateChanged: this.videoPlayStateChangedCallback, 674 pickerController: this.pickerController, 675 }).height('60%').width('100%') 676 677 // Simulate the selection bar at the bottom of the application. 678 if (this.isBrowserShow) { 679 Row() { 680 ForEach(this.selectUris, (uri: string) => { 681 if (uri === this.currentUri) { 682 Image(uri) 683 .height('10%') 684 .width('10%') 685 .onClick(() => { 686 }) 687 .borderWidth(1) 688 .borderColor('red') 689 } else { 690 Image(uri).height('10%').width('10%').onClick(() => { 691 this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris); 692 this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL); 693 }) 694 } 695 }, (uri: string) => JSON.stringify(uri)) 696 } 697 } else { 698 Button('Preview').width('33%').height('5%').onClick(() => { 699 if (this.selectUris.length > 0) { 700 this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY); 701 } 702 }) 703 } 704 } 705 } 706 } 707} 708``` 709