• 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) by users, you can use the [FilePicker](../reference/apis/js-apis-file-picker.md) prebuilt in OpenHarmony to implement selecting 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 **FilePicker** module.
16
17   ```ts
18   import picker from '@ohos.file.picker';
19   ```
20
212. Create a **photoSelectOptions** instance.
22
23   ```ts
24   const photoSelectOptions = new picker.PhotoSelectOptions();
25   ```
26
273. Set the file type and the maximum number of media files to select.
28   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).
29
30   ```ts
31   photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // Select images.
32   photoSelectOptions.maxSelectNumber = 5; // Set the maximum number of images to select.
33   ```
34
354. 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.
36
37   Use [PhotoSelectResult](../reference/apis/js-apis-file-picker.md#photoselectresult) to return a result set. Further operations on the selected files can be performed based on the file URIs in the result set.
38
39   ```ts
40   const photoPicker = new picker.PhotoViewPicker();
41   photoPicker.select(photoSelectOptions)
42     .then(async (photoSelectResult) => {
43       let uri = photoSelectResult.photoUris[0];
44       // Perform operations on the files based on the file URIs obtained.
45     })
46     .catch((err) => {
47       console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
48     })
49   ```
50
51## Selecting Documents
52
531. Import the **FilePicker** module.
54
55   ```ts
56   import picker from '@ohos.file.picker';
57   ```
58
592. Create a **documentSelectOptions** instance.
60
61   ```ts
62   const documentSelectOptions = new picker.DocumentSelectOptions();
63   ```
64
653. 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.
66
67     After the documents are selected successfully, a result set containing the file URIs is returned. Further operations can be performed on the documents based on the file URIs.
68
69   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).
70
71   > **NOTE**
72   >
73   > Currently, **DocumentSelectOptions** is not configurable. By default, all types of user files are selected.
74
75   ```ts
76   const documentViewPicker = new picker.DocumentViewPicker(); // Create a documentViewPicker instance.
77   documentViewPicker.select(documentSelectOptions)
78     .then((documentSelectResult) => {
79       let uri = documentSelectResult[0];
80       // Perform operations on the documents based on the file URIs.
81     })
82     .catch((err) => {
83       console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
84     })
85   ```
86
87   > **NOTE**
88   >
89   > Currently, **DocumentSelectOptions** does not provide the method for obtaining the file name. To obtain the file name, use **startAbilityForResult()**.
90
91   ```ts
92   let config = {
93     action: 'ohos.want.action.OPEN_FILE',
94     parameters: {
95       startMode: 'choose',
96     }
97   }
98   try {
99     let result = await context.startAbilityForResult(config, {windowMode: 1});
100     if (result.resultCode !== 0) {
101       console.error(`DocumentPicker.select failed, code is ${result.resultCode}, message is ${result.want.parameters.message}`);
102       return;
103     }
104     // Obtain the URI of the document.
105     let select_item_list = result.want.parameters.select_item_list;
106     // Obtain the name of the document.
107     let file_name_list = result.want.parameters.file_name_list;
108   } catch (err) {
109     console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
110   }
111   ```
112
113## Selecting an Audio File
114
1151. Import the **FilePicker** module.
116
117   ```ts
118   import picker from '@ohos.file.picker';
119   ```
120
1212. Create an **audioSelectOptions** instance.
122
123   ```ts
124   const audioSelectOptions = new picker.AudioSelectOptions();
125   ```
126
1273. 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.
128
129   After the files are selected successfully, a result set containing the URIs of the audio files selected is returned. Further operations can be performed on the documents based on the file URIs.
130
131   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).
132
133   > **NOTE**
134   >
135   > Currently, **AudioSelectOptions** is not configurable. By default, all types of user files are selected.
136
137   ```ts
138   const audioViewPicker = new picker.AudioViewPicker();
139   audioViewPicker.select(audioSelectOptions)
140     .then(audioSelectResult => {
141       let uri = audioSelectOptions[0];
142       // Perform operations on the audio files based on the file URIs.
143     })
144     .catch((err) => {
145       console.error(`Invoke audioPicker.select failed, code is ${err.code}, message is ${err.message}`);
146     })
147   ```
148