Selecting User Files

If your application needs to support share and saving of user files (such as images and videos) by users, you can use the FilePicker prebuilt in OpenHarmony to implement selecting and saving of user files.

The FilePicker provides the following interfaces by file type:

Selecting Images or Video Files

  1. Import the FilePicker module.

    import picker from '@ohos.file.picker';
    
  2. Create a photoSelectOptions instance.

    const photoSelectOptions = new picker.PhotoSelectOptions();
    
  3. Set the file type and the maximum number of media files to select. For example, select a maximum of five images. For details about the media file type, see PhotoViewMIMETypes.

    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // Select images.
    photoSelectOptions.maxSelectNumber = 5; // Set the maximum number of images to select.
    
  4. Create a photoPicker instance and call select() to open the FilePicker page for the user to select files.

    Use PhotoSelectResult to return a result set. Further operations on the selected files can be performed based on the file URIs in the result set.

    const photoPicker = new picker.PhotoViewPicker();
    photoPicker.select(photoSelectOptions)
      .then(async (photoSelectResult) => {
        let uri = photoSelectResult.photoUris[0];
        // Perform operations on the files based on the file URIs obtained.
      })
      .catch((err) => {
        console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
      })
    

Selecting Documents

  1. Import the FilePicker module.

    import picker from '@ohos.file.picker';
    
  2. Create a documentSelectOptions instance.

    const documentSelectOptions = new picker.DocumentSelectOptions(); 
    
  3. Create a documentViewPicker instance, and call select() to open the FilePicker page for the user to select documents.

    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.

    For example, you can use file management APIs 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.

    NOTE

    Currently, DocumentSelectOptions is not configurable. By default, all types of user files are selected.

    const documentViewPicker = new picker.DocumentViewPicker(); // Create a documentViewPicker instance.
    documentViewPicker.select(documentSelectOptions)
      .then((documentSelectResult) => {
        let uri = documentSelectResult[0];
        // Perform operations on the documents based on the file URIs.
      })
      .catch((err) => {
        console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
      })
    

    NOTE

    Currently, DocumentSelectOptions does not provide the method for obtaining the file name. To obtain the file name, use startAbilityForResult().

    let config = {
      action: 'ohos.want.action.OPEN_FILE',
      parameters: {
        startMode: 'choose',
      }
    }
    try {
      let result = await context.startAbilityForResult(config, {windowMode: 1});
      if (result.resultCode !== 0) {
        console.error(`DocumentPicker.select failed, code is ${result.resultCode}, message is ${result.want.parameters.message}`);
        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) {
      console.error(`Invoke documentPicker.select failed, code is ${err.code}, message is ${err.message}`);
    }
    

Selecting an Audio File

  1. Import the FilePicker module.

    import picker from '@ohos.file.picker';
    
  2. Create an audioSelectOptions instance.

    const audioSelectOptions = new picker.AudioSelectOptions();
    
  3. Create an audioViewPicker instance, and call select() to open the FilePicker page for the user to select audio files.

    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.

    For example, use the file management interface 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.

    NOTE

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

    const audioViewPicker = new picker.AudioViewPicker();
    audioViewPicker.select(audioSelectOptions)
      .then(audioSelectResult => {
        let uri = audioSelectOptions[0];
        // Perform operations on the audio files based on the file URIs.
      })
      .catch((err) => {
        console.error(`Invoke audioPicker.select failed, code is ${err.code}, message is ${err.message}`);
      })