feat(dialog) - Support picker mode for open dialog (#3030)

For iOS and Android, there are 2 distinct file picker dialogs, one for
picking media and one for picking documents.

Previously, the filters provided by the user would determing which
picker would be displayed.

However, this has led to undefined behavior when no filter was provided.

To resolve this, we now provide a PickerMode (meant for iOS and
eventually Android) to explicitly define which picker we want to
display.

Eventually, we may need to provide more explicit ways of filtering by
MIME type or having specific modes for ImagePicker or VideoPicker for
ease of use on mobile platforms.

But for now, this is an initial implementation that allows specifying
which UI would be preferable for a file picker on mobile platforms.

Author: andrewdewaal

.changes/dialog-file-picker-mode.md

@@ -0,0 +1,6 @@
+---
+"dialog": minor
+"dialog-js": minor
+---
+
+Add `pickerMode` option to file picker (currently only used on iOS)

examples/api/src/views/Dialog.svelte

@@ -8,6 +8,7 @@
   let filter = null;
   let multiple = false;
   let directory = false;
+  let pickerMode = "";
 
   function arrayBufferToBase64(buffer, callback) {
     var blob = new Blob([buffer], {
@@ -65,6 +66,7 @@
         : [],
       multiple,
       directory,
+      pickerMode: pickerMode === "" ? undefined : pickerMode,
     })
       .then(function (res) {
         if (Array.isArray(res)) {
@@ -94,10 +96,10 @@
                 onMessage(res);
               }
             })
-            .catch(onMessage(res));
+            .catch(e => onMessage(e));
         }
       })
-      .catch(onMessage);
+      .catch(e => onMessage(e));
   }
 
   function saveDialog() {
@@ -112,7 +114,7 @@
             },
           ]
         : [],
-    })
+        })
       .then(onMessage)
       .catch(onMessage);
   }
@@ -142,6 +144,14 @@
   <input type="checkbox" id="dialog-directory" bind:checked={directory} />
   <label for="dialog-directory">Directory</label>
 </div>
+<div>
+  <label for="dialog-picker-mode">Picker Mode:</label>
+  <select id="dialog-picker-mode" bind:value={pickerMode}>
+    <option value="">None</option>
+    <option value="media">Media</option>
+    <option value="document">Document</option>
+  </select>
+</div>
 <br />
 
 <div class="flex flex-wrap flex-col md:flex-row gap-2 children:flex-shrink-0">
@@ -156,4 +166,4 @@
   <button class="btn" id="message-dialog" on:click={msg}>Message</button>
   <button class="btn" id="message-dialog" on:click={msgCustom}>Message (custom)</button>
 
-</div>
+</div>

plugins/dialog/guest-js/index.ts

@@ -30,7 +30,14 @@ interface DialogFilter {
 interface OpenDialogOptions {
   /** The title of the dialog window (desktop only). */
   title?: string
-  /** The filters of the dialog. */
+  /**
+   * The filters of the dialog.
+   * The behavior of filters on mobile platforms (iOS and Android) is different from desktop.
+   * On Android, we are not able to filter by extension, only by MIME type.
+   * On iOS, we are able to filter by extension in the document picker, but not in the media picker.
+   * In practice, if an extension for a video or image is included in the filters (such as `png` or `mp4`),
+   * the media picker will be displayed instead of the document picker (regardless of the {@linkcode pickerMode} value).
+   */
   filters?: DialogFilter[]
   /**
    * Initial directory or file path.
@@ -52,6 +59,25 @@ interface OpenDialogOptions {
   recursive?: boolean
   /** Whether to allow creating directories in the dialog. Enabled by default. **macOS Only** */
   canCreateDirectories?: boolean
+  /**
+   * The preferred mode of the dialog.
+   * This is meant for mobile platforms (iOS and Android) which have distinct file and media pickers.
+   * On desktop, this option is ignored.
+   * If not provided, the dialog will automatically choose the best mode based on the MIME types of the filters.
+   *
+   * As a note, this is only fully implemented on iOS for the time being.
+   * Android does have a specific media picker, but it requires one of two of the below:
+   * 1) Defining exactly one mime type of media (for example, `image/*` or `video/*`) for use by the ACTION_GET_CONTENT intent.
+   * If both of these MIME types are provided to the filter, the Document picker will be displayed.
+   * 2) Using the registerForActivityResult API to register a result callback for the media picker as opposed to the ACTION_GET_CONTENT intent.
+   * This is the recommended way to implement the media picker on Android, as the ACTION_GET_CONTENT intent is currently marked as deprecated.
+   * However, using registerForActivityResult requires being called from within the actual Activity object (it is a protected method), for which Tauri currently
+   * does not have a hook.
+   * As a result, we currently only support the document picker on Android until either:
+   * 1) We allow for explicitly defining a VideoPicker or a ImagePicker on Android.
+   * 2) A hook is provided to allow for calling registerForActivityResult from within the Android Activity object.
+   */
+  pickerMode?: PickerMode
 }
 
 /**
@@ -77,6 +103,8 @@ interface SaveDialogOptions {
   canCreateDirectories?: boolean
 }
 
+export type PickerMode = 'document' | 'media'
+
 /**
  * Default buttons for a message dialog.
  *

plugins/dialog/ios/Sources/DialogPlugin.swift

@@ -32,13 +32,19 @@ struct FilePickerOptions: Decodable {
   var multiple: Bool?
   var filters: [Filter]?
   var defaultPath: String?
+  var pickerMode: PickerMode?
 }
 
 struct SaveFileDialogOptions: Decodable {
   var fileName: String?
   var defaultPath: String?
 }
 
+enum PickerMode: String, Decodable {
+  case document
+  case media
+}
+
 class DialogPlugin: Plugin {
 
   var filePickerController: FilePickerController!
@@ -54,20 +60,15 @@ class DialogPlugin: Plugin {
 
     let parsedTypes = parseFiltersOption(args.filters ?? [])
 
-    var isMedia = !parsedTypes.isEmpty
-    var uniqueMimeType: Bool? = nil
-    var mimeKind: String? = nil
+    var filtersIncludeImage = false
+    var filtersIncludeVideo = false
     if !parsedTypes.isEmpty {
-      uniqueMimeType = true
-      for mime in parsedTypes {
-        let kind = mime.components(separatedBy: "/")[0]
-        if kind != "image" && kind != "video" {
-          isMedia = false
-        }
-        if mimeKind == nil {
-          mimeKind = kind
-        } else if mimeKind != kind {
-          uniqueMimeType = false
+      for type in parsedTypes {
+        let kind = type.preferredMIMEType?.components(separatedBy: "/")[0]
+        if kind == "image" {
+          filtersIncludeImage = true
+        } else if kind == "video" {
+          filtersIncludeVideo = true
         }
       }
     }
@@ -83,18 +84,20 @@ class DialogPlugin: Plugin {
       }
     }
 
-    if uniqueMimeType == true || isMedia {
+    // If the picker mode is media, we always want to show the media picker regardless of what's in the filters.
+    // Otherwise, if the filters include image or video, we want to show the media picker.
+    if args.pickerMode == .media || (filtersIncludeImage || filtersIncludeVideo) {
       DispatchQueue.main.async {
         if #available(iOS 14, *) {
           var configuration = PHPickerConfiguration(photoLibrary: PHPhotoLibrary.shared())
           configuration.selectionLimit = (args.multiple ?? false) ? 0 : 1
 
-          if uniqueMimeType == true {
-            if mimeKind == "image" {
-              configuration.filter = .images
-            } else if mimeKind == "video" {
-              configuration.filter = .videos
-            }
+          // If the filters include image or video, use the appropriate filter.
+          // If both are true, don't define a filter, which means we will display all media.
+          if filtersIncludeImage && !filtersIncludeVideo {
+            configuration.filter = .images
+          } else if filtersIncludeVideo && !filtersIncludeImage {
+            configuration.filter = .videos
           }
 
           let picker = PHPickerViewController(configuration: configuration)
@@ -105,22 +108,24 @@ class DialogPlugin: Plugin {
           let picker = UIImagePickerController()
           picker.delegate = self.filePickerController
 
-          if uniqueMimeType == true && mimeKind == "image" {
+          if filtersIncludeImage {
             picker.sourceType = .photoLibrary
           }
 
-          picker.sourceType = .photoLibrary
           picker.modalPresentationStyle = .fullScreen
           self.presentViewController(picker)
         }
       }
     } else {
-      let documentTypes = parsedTypes.isEmpty ? ["public.data"] : parsedTypes
       DispatchQueue.main.async {
-        let picker = UIDocumentPickerViewController(documentTypes: documentTypes, in: .import)
+        // The UTType.item is the catch-all, allowing for any file type to be selected.
+        let contentTypes = parsedTypes.isEmpty ? [UTType.item] : parsedTypes
+        let picker: UIDocumentPickerViewController = UIDocumentPickerViewController(forOpeningContentTypes: contentTypes, asCopy: true)
+        
         if let defaultPath = args.defaultPath {
           picker.directoryURL = URL(string: defaultPath)
         }
+
         picker.delegate = self.filePickerController
         picker.allowsMultipleSelection = args.multiple ?? false
         picker.modalPresentationStyle = .fullScreen
@@ -173,19 +178,16 @@ class DialogPlugin: Plugin {
     self.manager.viewController?.present(viewControllerToPresent, animated: true, completion: nil)
   }
 
-  private func parseFiltersOption(_ filters: [Filter]) -> [String] {
-    var parsedTypes: [String] = []
+  private func parseFiltersOption(_ filters: [Filter]) -> [UTType] {
+    var parsedTypes: [UTType] = []
     for filter in filters {
       for ext in filter.extensions ?? [] {
-        guard
-          let utType: String = UTTypeCreatePreferredIdentifierForTag(
-            kUTTagClassMIMEType, ext as CFString, nil)?.takeRetainedValue() as String?
-        else {
-          continue
+        if let utType = UTType(filenameExtension: ext) {
+          parsedTypes.append(utType)
         }
-        parsedTypes.append(utType)
       }
     }
+    
     return parsedTypes
   }
 

plugins/dialog/src/commands.rs

@@ -10,7 +10,7 @@ use tauri_plugin_fs::FsExt;
 
 use crate::{
     Dialog, FileDialogBuilder, FilePath, MessageDialogBuilder, MessageDialogButtons,
-    MessageDialogKind, MessageDialogResult, Result, CANCEL, NO, OK, YES,
+    MessageDialogKind, MessageDialogResult, PickerMode, Result, CANCEL, NO, OK, YES,
 };
 
 #[derive(Serialize)]
@@ -56,6 +56,13 @@ pub struct OpenDialogOptions {
     recursive: bool,
     /// Whether to allow creating directories in the dialog **macOS Only**
     can_create_directories: Option<bool>,
+    /// The preferred mode of the dialog.
+    /// This is meant for mobile platforms (iOS and Android) which have distinct file and media pickers.
+    /// On desktop, this option is ignored.
+    /// If not provided, the dialog will automatically choose the best mode based on the MIME types of the filters.
+    #[serde(default)]
+    #[cfg_attr(mobile, allow(dead_code))]
+    picker_mode: Option<PickerMode>,
 }
 
 /// The options for the save dialog API.
@@ -127,6 +134,9 @@ pub(crate) async fn open<R: Runtime>(
     if let Some(can) = options.can_create_directories {
         dialog_builder = dialog_builder.set_can_create_directories(can);
     }
+    if let Some(picker_mode) = options.picker_mode {
+        dialog_builder = dialog_builder.set_picker_mode(picker_mode);
+    }
     for filter in options.filters {
         let extensions: Vec<&str> = filter.extensions.iter().map(|s| &**s).collect();
         dialog_builder = dialog_builder.add_filter(filter.name, &extensions);

plugins/dialog/src/lib.rs

@@ -9,7 +9,7 @@
     html_favicon_url = "https://github.com/tauri-apps/tauri/raw/dev/app-icon.png"
 )]
 
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 use tauri::{
     plugin::{Builder, TauriPlugin},
     Manager, Runtime,
@@ -44,6 +44,13 @@ pub use desktop::Dialog;
 #[cfg(mobile)]
 pub use mobile::Dialog;
 
+#[derive(Debug, Serialize, Deserialize, Clone)]
+#[serde(rename_all = "lowercase")]
+pub enum PickerMode {
+    Document,
+    Media,
+}
+
 pub(crate) const OK: &str = "Ok";
 pub(crate) const CANCEL: &str = "Cancel";
 pub(crate) const YES: &str = "Yes";
@@ -369,6 +376,7 @@ pub struct FileDialogBuilder<R: Runtime> {
     pub(crate) file_name: Option<String>,
     pub(crate) title: Option<String>,
     pub(crate) can_create_directories: Option<bool>,
+    pub(crate) picker_mode: Option<PickerMode>,
     #[cfg(desktop)]
     pub(crate) parent: Option<crate::desktop::WindowHandle>,
 }
@@ -380,6 +388,7 @@ pub(crate) struct FileDialogPayload<'a> {
     file_name: &'a Option<String>,
     filters: &'a Vec<Filter>,
     multiple: bool,
+    picker_mode: &'a Option<PickerMode>,
 }
 
 // raw window handle :(
@@ -395,6 +404,7 @@ impl<R: Runtime> FileDialogBuilder<R> {
             file_name: None,
             title: None,
             can_create_directories: None,
+            picker_mode: None,
             #[cfg(desktop)]
             parent: None,
         }
@@ -406,6 +416,7 @@ impl<R: Runtime> FileDialogBuilder<R> {
             file_name: &self.file_name,
             filters: &self.filters,
             multiple,
+            picker_mode: &self.picker_mode,
         }
     }
 
@@ -466,6 +477,15 @@ impl<R: Runtime> FileDialogBuilder<R> {
         self
     }
 
+    /// Set the picker mode of the dialog.
+    /// This is meant for mobile platforms (iOS and Android) which have distinct file and media pickers.
+    /// On desktop, this option is ignored.
+    /// If not provided, the dialog will automatically choose the best mode based on the MIME types of the filters.
+    pub fn set_picker_mode(mut self, mode: PickerMode) -> Self {
+        self.picker_mode.replace(mode);
+        self
+    }
+
     /// Shows the dialog to select a single file.
     /// This is not a blocking operation,
     /// and should be used when running on the main thread to avoid deadlocks with the event loop.