• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Selecting Media Assets Using Picker
2<!--Kit: Media Library Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @yixiaoff-->
5<!--SE: @liweilu1-->
6<!--TSE: @xchaosioda-->
7
8When a user needs to share files such as images and videos, use **Picker** to start Gallery for the user to select the files to share. No permission is required when Picker is used. Currently, a UIAbility is used to start Gallery with the window component. The procedure is as follows:
9
10> **NOTE**
11>
12> Media Library Kit handles image and video management. If you need to read and save audio files, use [AudioViewPicker](../../reference/apis-core-file-kit/js-apis-file-picker.md#audioviewpicker).
13
141. Import modules.
15
16   ```ts
17   import { photoAccessHelper } from '@kit.MediaLibraryKit';
18   import { fileIo } from '@kit.CoreFileKit';
19   import { BusinessError } from '@kit.BasicServicesKit';
20   ```
21
222. Create a PhotoSelectOptions instance.
23
24   ```ts
25   const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
26   ```
27
283. Set the type and maximum number of media files to select.
29   The following uses images as an example. For details about the media file types, see [PhotoViewMIMETypes](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-e.md#photoviewmimetypes).
30
31   ```ts
32   photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // Select images.
33   photoSelectOptions.maxSelectNumber = 5; // Set the maximum number of images that can be selected.
34   ```
35
364. Create a photoViewPicker instance and call [PhotoViewPicker.select](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-PhotoViewPicker.md#select) to open Gallery for the user to select images. After the images are selected, [PhotoSelectResult](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-class.md#photoselectresult) is returned.
37
38   ```ts
39   let uris: Array<string> = [];
40   const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
41   photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
42     uris = photoSelectResult.photoUris;
43     console.info('photoViewPicker.select to file succeed and uris are:' + uris);
44   }).catch((err: BusinessError) => {
45     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
46   })
47   ```
48
49   The permission on the URIs returned by **select()** is read-only. File data can be read based on the URI. Note that the URI cannot be directly used in the Picker callback to open a file. You need to define a global variable to save the URI and use a button to open the file. For details, see [Reading File Data by URI](#reading-file-data-by-uri).
50
51   You can also [obtain an image or video based on the URI](#obtaining-an-image-or-video-by-uri).
52
53   If metadata needs to be obtained, you can use the [@ohos.file.fs](../../reference/apis-core-file-kit/js-apis-file-fs.md) and [@ohos.file.fileuri](../../reference/apis-core-file-kit/js-apis-file-fileuri.md) APIs to obtain file attribute information, such as the file name, size, access time, modification time, and path, based on the URI.
54
55## Reading File Data by URI
56
571. After the UI returns from Gallery, use a button to call other functions. Specifically, use[fileIo.openSync](../../reference/apis-core-file-kit/js-apis-file-fs.md#fsopensync) to open the file and obtain its FD through the [media file URI](../../file-management/user-file-uri-intro.md#media-file-uri). Note that the **mode** parameter of **fileIo.openSync()** must be **fileIo.OpenMode.READ_ONLY**.
58
59   ```ts
60   try {
61     let uri: string = '';
62     let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY);
63     console.info('file fd: ' + file.fd);
64   } catch (error) {
65     console.error('openSync failed with err: ' + error);
66   }
67   ```
68
692. Call [fileIo.readSync](../../reference/apis-core-file-kit/js-apis-file-fs.md#readsync) to read the file based on the FD, and close the FD after the data is read.
70
71   ```ts
72   try {
73     // buffer indicates the buffer length, which is user-defined.
74     let buffer = new ArrayBuffer(4096);
75     let readLen = fileIo.readSync(file.fd, buffer);
76     console.info('readSync data to file succeed and buffer size is:' + readLen);
77     fileIo.closeSync(file);
78   } catch (error) {
79     console.error('readSync or closeSync failed with err: ' + error);
80   }
81   ```
82
83## Obtaining an Image or Video by URI
84
85The media library allows **Picker** to select a [media file URI](../../file-management/user-file-uri-intro.md#media-file-uri) and obtain the corresponding image or video. The following describes how to query a URI named **'file://media/Photo/1/IMG_datetime_0001/displayName.jpg'**.
86
871. Define a media asset handler called [MediaAssetDataHandler](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetDataHandler.md). The system calls back to the application with **onDataPrepared** when the asset is ready.
88
89   ```ts
90   import { photoAccessHelper } from '@kit.MediaLibraryKit';
91   import { dataSharePredicates } from '@kit.ArkData';
92
93   class MediaDataHandler implements photoAccessHelper.MediaAssetDataHandler<ArrayBuffer> {
94     onDataPrepared(data: ArrayBuffer) {
95       if (data === undefined) {
96         console.error('Error occurred when preparing data');
97         return;
98       }
99       console.info('on image data prepared');
100       // Customize the logic for processing data.
101     }
102   }
103   ```
104
1052. Call [getAssets](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-PhotoAccessHelper.md#getassets-1) to obtain the assets, and call [requestImageData](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetManager.md#requestimagedata11) to obtain the specific asset.
106
107   ```ts
108   async function example(phAccessHelper: photoAccessHelper.PhotoAccessHelper, context: Context) {
109     let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
110     let uri = 'file://media/Photo/1/IMG_datetime_0001/displayName.jpg' // The URI must exist.
111     predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uri.toString());
112     let fetchOptions: photoAccessHelper.FetchOptions = {
113       fetchColumns: [photoAccessHelper.PhotoKeys.TITLE],
114       predicates: predicates
115     };
116
117     try {
118       let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOptions);
119       let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
120       console.info('getAssets photoAsset.uri : ' + photoAsset.uri);
121       // Obtain the file attribute information, such as the title. If the attribute to obtain is not a default one, add the column name to fetchColumns.
122       console.info('title : ' + photoAsset.get(photoAccessHelper.PhotoKeys.TITLE));
123       // Request image data.
124       let requestOptions: photoAccessHelper.RequestOptions = {
125         deliveryMode: photoAccessHelper.DeliveryMode.HIGH_QUALITY_MODE,
126       }
127       await photoAccessHelper.MediaAssetManager.requestImageData(context, photoAsset, requestOptions, new MediaDataHandler());
128       console.info('requestImageData successfully');
129       fetchResult.close();
130     } catch (err) {
131       console.error('getAssets failed with err: ' + err);
132     }
133   }
134   ```
135