• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Selecting User Files
2
3If your application needs to support share and saving of user files (such as images and videos), you can use OpenHarmony [FilePicker](../reference/apis/js-apis-file-picker.md) to implement selection and saving of user files.
4
5The **FilePicker** provides the following interfaces by file type:
6
7- [**PhotoViewPicker**](../reference/apis/js-apis-file-picker.md#photoviewpicker): used to select and save images or video files.
8
9- [**DocumentViewPicker**](../reference/apis/js-apis-file-picker.md#documentviewpicker): used to select and save documents.
10
11- [**AudioViewPicker**](../reference/apis/js-apis-file-picker.md#audioviewpicker): used to select and save audio files.
12
13## Selecting Images or Video Files
14
151. Import the **picker** module and **fs** module.
16
17   ```ts
18   import picker from '@ohos.file.picker';
19   import fs from '@ohos.file.fs';
20   ```
21
222. Create a **photoSelectOptions** instance.
23
24   ```ts
25   const photoSelectOptions = new picker.PhotoSelectOptions();
26   ```
27
283. Set the file type and the maximum number of media files to select.
29   For example, select a maximum of five images. For details about the media file type, see [PhotoViewMIMETypes](../reference/apis/js-apis-file-picker.md#photoviewmimetypes).
30
31   ```ts
32   photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // Select images.
33   photoSelectOptions.maxSelectNumber = 5; // Set the maximum number of images to select.
34   ```
35
364. Create a **photoPicker** instance and call [select()](../reference/apis/js-apis-file-picker.md#select) to open the **FilePicker** page for the user to select files. After the files are selected, [PhotoSelectResult](../reference/apis/js-apis-file-picker.md#photoselectresult) is returned.
37
38   <br>The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URIs in the **PhotoSelectResult**. 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 trigger file opening.
39
40   ```ts
41   let URI = null;
42   const photoViewPicker = new picker.PhotoViewPicker();
43   photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
44     URI = photoSelectResult.photoUris[0];
45     console.info('photoViewPicker.select to file succeed and URI is:' + URI);
46   }).catch((err) => {
47     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
48   })
49   ```
50
515. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
52
53   ```ts
54   let file = fs.openSync(URI, fs.OpenMode.READ_ONLY);
55   console.info('file fd: ' + file.fd);
56   ```
57
586. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file data based on the FD. After the data is read, close the FD.
59
60   ```ts
61   let buffer = new ArrayBuffer(4096);
62   let readLen = fs.readSync(file.fd, buffer);
63   console.info('readSync data to file succeed and buffer size is:' + readLen);
64   fs.closeSync(file);
65   ```
66
67## Selecting Documents
68
691. Import the **picker** module and **fs** module.
70
71   ```ts
72   import picker from '@ohos.file.picker';
73   import fs from '@ohos.file.fs';
74   ```
75
762. Create a **documentSelectOptions** instance.
77
78   ```ts
79   const documentSelectOptions = new picker.DocumentSelectOptions();
80   ```
81
823. Create a **documentViewPicker** instance, and call [**select()**](../reference/apis/js-apis-file-picker.md#select-3) to open the **FilePicker** page for the user to select documents. After the documents are selected, a result set containing the file URIs is returned.
83
84   <br>The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URIs in the result set. 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 trigger file opening.
85
86   <br>For example, you can use [file management APIs](../reference/apis/js-apis-file-fs.md) to obtain file attribute information, such as the file size, access time, and last modification time, based on the URI. If you need to obtain the file name, use [startAbilityForResult](../../application-dev/application-models/uiability-intra-device-interaction.md).
87
88   > **NOTE**
89   >
90   > Currently, **DocumentSelectOptions** is not configurable. By default, all types of user files are selected.
91
92   ```ts
93   let URI = null;
94   const documentViewPicker = new picker.DocumentViewPicker(); // Create a documentViewPicker instance.
95   documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
96     URI = documentSelectResult[0];
97     console.info('documentViewPicker.select to file succeed and URI is:' + URI);
98   }).catch((err) => {
99     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
100   })
101   ```
102
103   > **NOTE**
104   >
105   > Currently, **DocumentSelectOptions** does not provide the method for obtaining the file name. To obtain the file name, use **startAbilityForResult()**.
106
107   ```ts
108   let config = {
109     action: 'ohos.want.action.OPEN_FILE',
110     parameters: {
111       startMode: 'choose',
112     }
113   }
114   try {
115     let result = await context.startAbilityForResult(config, {windowMode: 1});
116     if (result.resultCode !== 0) {
117       console.error(`documentViewPicker.select failed, code is ${result.resultCode}, message is ${result.want.parameters.message}`);
118       return;
119     }
120     // Obtain the URI of the document.
121     let select_item_list = result.want.parameters.select_item_list;
122     // Obtain the name of the document.
123     let file_name_list = result.want.parameters.file_name_list;
124   } catch (err) {
125     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
126   }
127   ```
128
1294. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
130
131   ```ts
132   let file = fs.openSync(URI, fs.OpenMode.READ_ONLY);
133   console.info('file fd: ' + file.fd);
134   ```
135
1365. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file data based on the FD. After the data is read, close the FD.
137
138   ```ts
139   let buffer = new ArrayBuffer(4096);
140   let readLen = fs.readSync(file.fd, buffer);
141   console.info('readSync data to file succeed and buffer size is:' + readLen);
142   fs.closeSync(file);
143   ```
144
145
146## Selecting an Audio File
147
1481. Import the **picker** module and **fs** module.
149
150   ```ts
151   import picker from '@ohos.file.picker';
152   import fs from '@ohos.file.fs';
153   ```
154
1552. Create an **audioSelectOptions** instance.
156
157   ```ts
158   const audioSelectOptions = new picker.AudioSelectOptions();
159   ```
160
1613. Create an **audioViewPicker** instance, and call [**select()**](../reference/apis/js-apis-file-picker.md#select-6) to open the **FilePicker** page for the user to select audio files. After the files are selected, a result set containing the URIs of the audio files selected is returned.
162
163   <br>The permission on the URIs returned by **select()** is read-only. Further file operations can be performed based on the URIs in the result set. 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 trigger file opening.
164
165   <br>For example, use the [file management interface](../reference/apis/js-apis-file-fs.md) to obtain the file handle (FD) of the 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-playback-overview.md).
166
167   > **NOTE**
168   >
169   > Currently, **AudioSelectOptions** is not configurable. By default, all types of user files are selected.
170
171   ```ts
172   let URI = null;
173   const audioViewPicker = new picker.AudioViewPicker();
174   audioViewPicker.select(audioSelectOptions).then(audioSelectResult => {
175     URI = audioSelectOptions[0];
176     console.info('audioViewPicker.select to file succeed and URI is:' + URI);
177   }).catch((err) => {
178     console.error(`Invoke audioViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
179   })
180   ```
181
1824. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
183
184   ```ts
185   let file = fs.openSync(URI, fs.OpenMode.READ_ONLY);
186   console.info('file fd: ' + file.fd);
187   ```
188
1895. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file data based on the FD. After the data is read, close the FD.
190
191   ```ts
192   let buffer = new ArrayBuffer(4096);
193   let readLen = fs.readSync(file.fd, buffer);
194   console.info('readSync data to file succeed and buffer size is:' + readLen);
195   fs.closeSync(file);
196   ```
197