select-user-file.md 9.5 KB
Newer Older
A
Annie_wang 已提交
1 2
# Selecting User Files

A
Annie_wang 已提交
3
If 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. You do not need to apply for any permission for this type of APIs.
A
Annie_wang 已提交
4 5 6

The **FilePicker** provides the following interfaces by file type:

A
Annie_wang 已提交
7
- [PhotoViewPicker](../reference/apis/js-apis-file-picker.md#photoviewpicker): used to select and save images or video files.
A
Annie_wang 已提交
8

A
Annie_wang 已提交
9
- [DocumentViewPicker](../reference/apis/js-apis-file-picker.md#documentviewpicker): used to select and save documents.
A
Annie_wang 已提交
10

A
Annie_wang 已提交
11
- [AudioViewPicker](../reference/apis/js-apis-file-picker.md#audioviewpicker): used to select and save audio files.
A
Annie_wang 已提交
12 13 14

## Selecting Images or Video Files

A
Annie_wang 已提交
15
1. Import the **picker** and **fs** modules.
A
Annie_wang 已提交
16 17 18

   ```ts
   import picker from '@ohos.file.picker';
A
Annie_wang 已提交
19
   import fs from '@ohos.file.fs';
A
Annie_wang 已提交
20 21 22 23 24 25 26 27
   ```

2. Create a **photoSelectOptions** instance.

   ```ts
   const photoSelectOptions = new picker.PhotoSelectOptions();
   ```

A
Annie_wang 已提交
28 29
3. Set the file type and the maximum number of media files to select.
   
A
Annie_wang 已提交
30
   For example, select a maximum of five images. For details about the media file types, see [PhotoViewMIMETypes](../reference/apis/js-apis-file-picker.md#photoviewmimetypes).
A
Annie_wang 已提交
31 32 33 34 35
   ```ts
   photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // Select images.
   photoSelectOptions.maxSelectNumber = 5; // Set the maximum number of images to select.
   ```

A
Annie_wang 已提交
36
4. 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.
A
Annie_wang 已提交
37

G
Gloria 已提交
38
   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.
A
Annie_wang 已提交
39 40

   ```ts
A
Annie_wang 已提交
41
   let uris = null;
A
Annie_wang 已提交
42 43
   const photoViewPicker = new picker.PhotoViewPicker();
   photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
A
Annie_wang 已提交
44 45
     uris = photoSelectResult.photoUris;
     console.info('photoViewPicker.select to file succeed and uris are:' + uris);
A
Annie_wang 已提交
46
   }).catch((err) => {
A
Annie_wang 已提交
47
     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
A
Annie_wang 已提交
48 49 50
   })
   ```

A
Annie_wang 已提交
51
5. After the UI is returned from the **FilePicker** page, use a button to trigger API calling. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the file descriptor (FD). Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_ONLY**.
A
Annie_wang 已提交
52 53

   ```ts
G
Gloria 已提交
54
   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
A
Annie_wang 已提交
55 56 57
   console.info('file fd: ' + file.fd);
   ```

A
Annie_wang 已提交
58
6. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file based on the FD. After the data is read, close the FD.
A
Annie_wang 已提交
59 60

   ```ts
A
Annie_wang 已提交
61 62 63
   let buffer = new ArrayBuffer(4096);
   let readLen = fs.readSync(file.fd, buffer);
   console.info('readSync data to file succeed and buffer size is:' + readLen);
A
Annie_wang 已提交
64
   fs.closeSync(file);
A
Annie_wang 已提交
65 66 67 68
   ```

## Selecting Documents

A
Annie_wang 已提交
69
1. Import the **picker** and **fs** modules.
A
Annie_wang 已提交
70 71 72

   ```ts
   import picker from '@ohos.file.picker';
A
Annie_wang 已提交
73
   import fs from '@ohos.file.fs';
A
Annie_wang 已提交
74 75 76 77 78 79
   ```

2. Create a **documentSelectOptions** instance.

   ```ts
   const documentSelectOptions = new picker.DocumentSelectOptions(); 
A
Annie_wang 已提交
80 81 82
   documentSelectOptions.maxSelectNumber = 5; // (Optional) Maximum number of documents to select.
   documentSelectOptions.defaultFilePathUri = "file://docs/storage/Users/currentUser/test"; // (Optional) Path of the file or directory to select.
   documentSelectOptions.fileSuffixFilters = ['.png', '.txt', '.mp4']; // (Optional) File name extensions of the documents to select.
A
Annie_wang 已提交
83 84
   ```

A
Annie_wang 已提交
85 86
3. 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.
   
G
Gloria 已提交
87
   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.
A
Annie_wang 已提交
88
   
A
Annie_wang 已提交
89
   For example, you can use [file management APIs](../reference/apis/js-apis-file-fs.md) to obtain file attributes, 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).
A
Annie_wang 已提交
90

A
Annie_wang 已提交
91
   ```ts
A
Annie_wang 已提交
92
   let uris = null;
A
Annie_wang 已提交
93
   const documentViewPicker = new picker.DocumentViewPicker(); // Create a documentViewPicker instance.
A
Annie_wang 已提交
94
   documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
A
Annie_wang 已提交
95 96
     uris = documentSelectResult;
     console.info('documentViewPicker.select to file succeed and uris are:' + uris);
A
Annie_wang 已提交
97
   }).catch((err) => {
A
Annie_wang 已提交
98
     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
A
Annie_wang 已提交
99 100 101 102 103
   })
   ```

   > **NOTE**
   >
A
Annie_wang 已提交
104
   > Currently, **DocumentSelectOptions** cannot be used to obtain the file name. To obtain the file name, use **startAbilityForResult()**.
A
Annie_wang 已提交
105 106 107 108 109 110 111 112 113 114 115

   ```ts
   let config = {
     action: 'ohos.want.action.OPEN_FILE',
     parameters: {
       startMode: 'choose',
     }
   }
   try {
     let result = await context.startAbilityForResult(config, {windowMode: 1});
     if (result.resultCode !== 0) {
A
Annie_wang 已提交
116
       console.error(`documentViewPicker.select failed, code is ${result.resultCode}, message is ${result.want.parameters.message}`);
A
Annie_wang 已提交
117 118 119 120 121 122 123
       return;
     }
     // Obtain the URI of the document.
     let select_item_list = result.want.parameters.select_item_list;
     // Obtain the name of the document.
     let file_name_list = result.want.parameters.file_name_list;
   } catch (err) {
A
Annie_wang 已提交
124
     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
A
Annie_wang 已提交
125
   }
A
Annie_wang 已提交
126 127
   ```

A
Annie_wang 已提交
128
4. After the UI is returned from the **FilePicker** page, use a button to trigger API calling. 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**.
A
Annie_wang 已提交
129 130

   ```ts
G
Gloria 已提交
131
   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
A
Annie_wang 已提交
132 133 134
   console.info('file fd: ' + file.fd);
   ```

A
Annie_wang 已提交
135
5. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file based on the FD. After the data is read, close the FD.
A
Annie_wang 已提交
136 137

   ```ts
A
Annie_wang 已提交
138 139 140
   let buffer = new ArrayBuffer(4096);
   let readLen = fs.readSync(file.fd, buffer);
   console.info('readSync data to file succeed and buffer size is:' + readLen);
A
Annie_wang 已提交
141 142 143 144
   fs.closeSync(file);
   ```


A
Annie_wang 已提交
145
## Selecting Audio Files
A
Annie_wang 已提交
146

A
Annie_wang 已提交
147
1. Import the **picker** and **fs** modules.
A
Annie_wang 已提交
148 149 150

   ```ts
   import picker from '@ohos.file.picker';
A
Annie_wang 已提交
151
   import fs from '@ohos.file.fs';
A
Annie_wang 已提交
152 153 154 155 156 157 158 159
   ```

2. Create an **audioSelectOptions** instance.

   ```ts
   const audioSelectOptions = new picker.AudioSelectOptions();
   ```

A
Annie_wang 已提交
160 161
3. 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.
   
G
Gloria 已提交
162
   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.
A
Annie_wang 已提交
163
   
G
Gloria 已提交
164
   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).
A
Annie_wang 已提交
165 166 167 168 169 170

   > **NOTE**
   >
   > Currently, **AudioSelectOptions** is not configurable. By default, all types of user files are selected.

   ```ts
G
Gloria 已提交
171
   let uri = null;
A
Annie_wang 已提交
172
   const audioViewPicker = new picker.AudioViewPicker();
A
Annie_wang 已提交
173
   audioViewPicker.select(audioSelectOptions).then(audioSelectResult => {
A
Annie_wang 已提交
174
     uri = audioSelectResult[0];
G
Gloria 已提交
175
     console.info('audioViewPicker.select to file succeed and uri is:' + uri);
A
Annie_wang 已提交
176
   }).catch((err) => {
A
Annie_wang 已提交
177
     console.error(`Invoke audioViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
A
Annie_wang 已提交
178 179 180
   })
   ```

A
Annie_wang 已提交
181
4. After the UI is returned from the **FilePicker** page, use a button to trigger API calling. 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**.
A
Annie_wang 已提交
182 183

   ```ts
G
Gloria 已提交
184
   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
A
Annie_wang 已提交
185 186 187
   console.info('file fd: ' + file.fd);
   ```

A
Annie_wang 已提交
188
5. Use [fs.readSync()](../reference/apis/js-apis-file-fs.md#readsync) to read the file based on the FD. After the data is read, close the FD.
A
Annie_wang 已提交
189 190

   ```ts
A
Annie_wang 已提交
191 192 193
   let buffer = new ArrayBuffer(4096);
   let readLen = fs.readSync(file.fd, buffer);
   console.info('readSync data to file succeed and buffer size is:' + readLen);
A
Annie_wang 已提交
194
   fs.closeSync(file);
A
Annie_wang 已提交
195
   ```