1# @ohos.file.AlbumPickerComponent (AlbumPickerComponent)
2
3The **AlbumPickerComponent** component embedded in the UI of an application allows the application to access the albums in the user directory without any permission.
4
5This component must be used together with [PhotoPickerComponent](ohos-file-PhotoPickerComponent.md). When a user selects an album by using **AlbumPickerComponent**, **PhotoPickerComponent** is instructed to update the photos and videos in the album.
6
7> **NOTE**
8>
9> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
10
11## Modules to Import
12
13```ts
14import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo, photoAccessHelper } from '@kit.MediaLibraryKit';
15import { EmptyAreaClickCallback } from '@ohos.file.AlbumPickerComponent';
16```
17
18## Properties
19
20The [universal properties](../apis-arkui/arkui-ts/ts-universal-attributes-size.md) are supported.
21
22## AlbumPickerComponent
23
24AlbumPickerComponent({
25  albumPickerOptions?: AlbumPickerOptions,
26  onAlbumClick?: (albumInfo: AlbumInfo) => boolean,
27  onEmptyAreaClick?: EmptyAreaClickCallback
28})
29
30Allows the application to access the albums in the user directory without any permission.
31
32**Decorator**: @Component
33
34**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core
35
36**Parameters**
37
38| Name                | Type                                                 | Mandatory | Description                             |
39|--------------------|-----------------------------------------------------|-----|---------------------------------|
40| albumPickerOptions | [AlbumPickerOptions](#albumpickeroptions)           | No  | **AlbumPicker** configuration.<br>**Atomic service API**: This API can be used in atomic services since API version 12.             |
41| onAlbumClick       | (albumInfo: [AlbumInfo](#albuminfo)) => boolean     | No  | Callback used to return the album URI when an album is selected by a user.<br>**Atomic service API**: This API can be used in atomic services since API version 12.   |
42| onEmptyAreaClick<sup>13+</sup>   | [EmptyAreaClickCallback](#emptyareaclickcallback13) | No  | Callback to be invoked when the blank area of **AlbumPickerComponent** is tapped, which is used to notify the application of the tap.<br>**Atomic service API**: This API can be used in atomic services since API version 13.|
43
44## AlbumPickerOptions
45
46Represents the **AlbumPicker** configuration.
47
48**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core
49
50| Name            | Type | Mandatory | Description                                                         |
51|----------------|-------|-----|-------------------------------------------------------------|
52| themeColorMode | [PickerColorMode](ohos-file-PhotoPickerComponent.md#pickercolormode) | No  | Theme color of the album page. The options are **AUTO**, **Light**, and **Dark**. The default value is **AUTO**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.                        |
53| filterType<sup>13+</sup>     | [photoAccessHelper.PhotoViewMIMETypes](js-apis-photoAccessHelper.md#photoviewmimetypes) | No  | Type of the filter. You can use it to display images, videos, or both. If this parameter is not specified, images and videos are displayed in a specific album.<br>**Atomic service API**: This API can be used in atomic services since API version 13.|
54
55## EmptyAreaClickCallback<sup>13+</sup>
56
57type EmptyAreaClickCallback = () => void
58
59Called when the blank area of the **AlbumPickerComponent** component is tapped.
60
61**Atomic service API**: This API can be used in atomic services since API version 13.
62
63**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core
64
65## AlbumInfo
66
67Represents album information.
68
69**Atomic service API**: This API can be used in atomic services since API version 12.
70
71**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core
72
73| Name | Type | Mandatory | Description   |
74|------|------|-----|---------|
75| uri  | string | No  | Album URI.|
76| albumName  | string | No  | Album name.|
77
78## Example
79
80```ts
81// xxx.ets
82import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo, PickerColorMode, photoAccessHelper } from '@kit.MediaLibraryKit';
83import { EmptyAreaClickCallback } from '@ohos.file.AlbumPickerComponent';
84
85@Entry
86@Component
87struct PickerDemo {
88  albumPickerOptions: AlbumPickerOptions = new AlbumPickerOptions();
89  private emptyAreaClickCallback: EmptyAreaClickCallback = (): void => this.onEmptyAreaClick();
90
91  aboutToAppear() {
92    this.albumPickerOptions.themeColorMode = PickerColorMode.AUTO;
93    this.albumPickerOptions.filterType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
94  }
95
96  private onAlbumClick(albumInfo: AlbumInfo): boolean {
97    if (albumInfo?.uri) {
98      // pickerController instructs PhotoPickerComponent to refresh data.
99    }
100    if (albumInfo?.albumName) {
101      // Perform subsequent processing based on the obtained albumName.
102    }
103    return true;
104  }
105
106  private onEmptyAreaClick(): void {
107    // Callback when the blank area of the component is tapped.
108  }
109
110  build() {
111    Stack() {
112      AlbumPickerComponent({
113        albumPickerOptions: this.albumPickerOptions,
114        onAlbumClick:(albumInfo: AlbumInfo): boolean => this.onAlbumClick(albumInfo),
115        onEmptyAreaClick(): this.emptyAreaClickCallback,
116      }).height('100%').width('100%')
117    }
118  }
119}
120