• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Selecting User Files
2
3You can use [FilePicker](../reference/apis-core-file-kit/js-apis-file-picker.md) to implement the capabilities required for sharing and saving user files such as images and videos. **FilePicker** accesses the file to start the related application, which allows the user to select or save files on the UI. No permission is required for calling **FilePicker** APIs.
4
5**FilePicker** provides the following interfaces by file type:
6
7- [PhotoViewPicker](../reference/apis-core-file-kit/js-apis-file-picker.md#photoviewpicker): used to select and save images or videos. You are advised to use [PhotoViewPicker of PhotoAccessHelper](../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#photoviewpicker) to select files. The **PhotoViewPicker** API triggers the **Gallery** application. The images or videos saved by **save()** are stored in a directory of the **FileManager** application, and cannot be viewed in **Gallery**. To enable the saved media assets to be viewed in **Gallery**, use [a security component to create the media asset](photoAccessHelper-resource-guidelines.md#creating-a-media-asset-using-a-security-component).
8
9- [DocumentViewPicker](../reference/apis-core-file-kit/js-apis-file-picker.md#documentviewpicker): used to select and save documents. The **DocumentViewPicker** API triggers the **FilePicker** application. Documents are not distinguished by file name extensions. For example, the images and files downloaded from a browser are documents.
10
11- [AudioViewPicker](../reference/apis-core-file-kit/js-apis-file-picker.md#audioviewpicker): used to select and save audio clips. The **AudioViewPicker** API triggers the **FilePicker** application.
12
13## Selecting Images or Videos
14
151. Import the **picker** and **fs** modules.
16
17   ```ts
18   import picker from '@ohos.file.picker';
19   import fs from '@ohos.file.fs';
20   import { BusinessError } from '@ohos.base';
21   ```
22
232. Create a **PhotoSelectOptions** instance.
24
25   ```ts
26   import picker from '@ohos.file.picker';
27
28   const photoSelectOptions = new picker.PhotoSelectOptions();
29   ```
30
313. Set the type and maximum number of the files to select.<br>
32   For example, select a maximum of five images. For details about the media file types, see [PhotoViewMIMETypes](../reference/apis-core-file-kit/js-apis-file-picker.md#photoviewmimetypes).
33
34   ```ts
35   import picker from '@ohos.file.picker';
36
37   photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // Select images.
38   photoSelectOptions.maxSelectNumber = 5; // Set the maximum number of images to select.
39   ```
40
414. Create a **PhotoViewPicker** instance and call [select()](../reference/apis-core-file-kit/js-apis-file-picker.md#select) to open the **Gallery** page for the user to select images. After the user selects images, [PhotoSelectResult](../reference/apis-core-file-kit/js-apis-file-picker.md#photoselectresult) is returned.<br>The permission on the URIs returned by **select()** is read-only. You are advised to define a global variable to hold the URI and use a button to open the file.<br>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.
42
43   ```ts
44import picker from '@ohos.file.picker';
45   import { BusinessError } from '@ohos.base';
46
47   let uris: Array<string> = [];
48   const photoViewPicker = new picker.PhotoViewPicker();
49   photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {
50     uris = photoSelectResult.photoUris;
51     console.info('photoViewPicker.select to file succeed and uris are:' + uris);
52   }).catch((err: BusinessError) => {
53     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
54   })
55   ```
56
575. After the application UI is returned from **Gallery**, use a button to trigger the application's API. Use [fs.openSync](../reference/apis-core-file-kit/js-apis-file-fs.md#fsopensync) to open an image based on the URI. After the image is opened, the FD is returned. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
58
59   ```ts
60   import fs from '@ohos.file.fs';
61
62   let uri: string = '';
63   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
64   console.info('file fd: ' + file.fd);
65   ```
66
676. Use [fs.readSync](../reference/apis-core-file-kit/js-apis-file-fs.md#readsync) to read the file based on the FD, and use **closeSync** to close the file.
68
69   ```ts
70   import fs from '@ohos.file.fs';
71
72   let buffer = new ArrayBuffer(4096);
73   let readLen = fs.readSync(file.fd, buffer);
74   console.info('readSync data to file succeed and buffer size is:' + readLen);
75   fs.closeSync(file);
76   ```
77
78## Selecting Documents
79
801. Import the **picker** and **fs** modules.
81
82   ```ts
83   import picker from '@ohos.file.picker';
84   import fs from '@ohos.file.fs';
85   import Want from '@ohos.app.ability.Want';
86   import { BusinessError } from '@ohos.base';
87   ```
88
892. Create a **DocumentSelectOptions** instance.
90
91   ```ts
92   import picker from '@ohos.file.picker';
93
94   const documentSelectOptions = new picker.DocumentSelectOptions();
95   documentSelectOptions.maxSelectNumber = 5; // (Optional) Maximum number of documents to select.
96   documentSelectOptions.defaultFilePathUri = "file://docs/storage/Users/currentUser/test"; // (Optional) Path of the document or directory to select.
97   documentSelectOptions.fileSuffixFilters = ['.png', '.txt', '.mp4']; // (Optional) Types of the documents to select. Use a comma to separate multiple file name extensions.
98   ```
99
1003. Create a **DocumentViewPicker** instance, and use [select()](../reference/apis-core-file-kit/js-apis-file-picker.md#select-3) to start the FilePicker application page for the user to select documents. After the user selects documents, a result set containing the document URIs is returned.
101
102   The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URI. You are advised to define a global variable to hold the URI and use a button to open the file.
103
104   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 document attribute information, such as the document name, size, access time, modification time, and path, based on the URI.
105
106   ```ts
107   import picker from '@ohos.file.picker';
108   import { BusinessError } from '@ohos.base';
109
110   let uris: Array<string> = [];
111   const documentViewPicker = new picker.DocumentViewPicker(); // Create a documentViewPicker instance.
112   documentViewPicker.select(documentSelectOptions).then((documentSelectResult: Array<string>) => {
113     uris = documentSelectResult;
114     console.info('documentViewPicker.select to file succeed and uris are:' + uris);
115   }).catch((err: BusinessError) => {
116     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
117   })
118   ```
119
1204. After the application UI is returned from **FilePicker**, use a button to trigger the application's API. Use [fs.openSync](../reference/apis-core-file-kit/js-apis-file-fs.md#fsopensync) to open a document based on the URI. After the document is opened, the FD is returned. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
121
122   ```ts
123   import fs from '@ohos.file.fs';
124
125   let uri: string = '';
126   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
127   console.info('file fd: ' + file.fd);
128   ```
129
1305. Use [fs.readSync](../reference/apis-core-file-kit/js-apis-file-fs.md#readsync) to read the document based on the FD, and use **closeSync** to close the document.
131
132   ```ts
133   import fs from '@ohos.file.fs';
134
135   let buffer = new ArrayBuffer(4096);
136   let readLen = fs.readSync(file.fd, buffer);
137   console.info('readSync data to file succeed and buffer size is:' + readLen);
138   fs.closeSync(file);
139   ```
140
141## Selecting Audio Clips
142
1431. Import the **picker** and **fs** modules.
144
145   ```ts
146   import picker from '@ohos.file.picker';
147   import fs from '@ohos.file.fs';
148   import { BusinessError } from '@ohos.base';
149   ```
150
1512. Create an **AudioSelectOptions** instance.
152
153   > **NOTE**
154   >
155   > Currently, **AudioSelectOptions** is not configurable. By default, all types of user files are selected.
156
157   ```ts
158   import picker from '@ohos.file.picker';
159
160   const audioSelectOptions = new picker.AudioSelectOptions();
161   ```
162
1633. Create an **audioViewPicker** instance, and use [select()](../reference/apis-core-file-kit/js-apis-file-picker.md#select-6) to start the FilePicker application page for the user to select audio clips. After the user selects audio clips, a result set containing the URIs of the audio clips selected is returned.
164
165   The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URI. You are advised to define a global variable to hold the URI and use a button to open the file.
166
167   For example, use the [@ohos.file.fs](../reference/apis-core-file-kit/js-apis-file-fs.md) API to obtain the FD of an audio clip based on the URI, and then develop the audio playback function based on the media service. For details, see [Audio Playback Development](../media/audio/audio-playback-overview.md).
168
169   ```ts
170   import picker from '@ohos.file.picker';
171
172   let uri: string = '';
173   const audioViewPicker = new picker.AudioViewPicker();
174   audioViewPicker.select(audioSelectOptions).then((audioSelectResult: Array<string>) => {
175     uri = audioSelectResult[0];
176     console.info('audioViewPicker.select to file succeed and uri is:' + uri);
177   }).catch((err: BusinessError) => {
178     console.error(`Invoke audioViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
179   })
180   ```
181
1824. After the application UI is returned from **FilePicker**, use a button to trigger the application's API. Use [fs.openSync](../reference/apis-core-file-kit/js-apis-file-fs.md#fsopensync) to open an audio clip based on the URI. After the audio clip is opened, the FD is returned. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
183
184   ```ts
185   import fs from '@ohos.file.fs';
186
187   let uri: string = '';
188   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
189   console.info('file fd: ' + file.fd);
190   ```
191
1925. Use [fs.readSync](../reference/apis-core-file-kit/js-apis-file-fs.md#readsync) to read the file based on the FD, and use **closeSync** to close the file.
193
194   ```ts
195   import fs from '@ohos.file.fs';
196
197   let buffer = new ArrayBuffer(4096);
198   let readLen = fs.readSync(file.fd, buffer);
199   console.info('readSync data to file succeed and buffer size is:' + readLen);
200   fs.closeSync(file);
201   ```
202
203
204