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

Co-authored-by: Andrew de Waal <andrewldewaal@gmail.com>

Author: onehumandev

.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)

Cargo.lock

@@ -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,7 +96,7 @@
                 onMessage(res);
               }
             })
-            .catch(onMessage(res));
+            .catch(onMessage);
         }
       })
       .catch(onMessage);
@@ -112,7 +114,7 @@
             },
           ]
         : [],
-    })
+      })
       .then(onMessage)
       .catch(onMessage);
   }
@@ -142,6 +144,16 @@
   <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="image">Image</option>
+    <option value="video">Video</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 +168,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>

examples/api/src/views/Dialog.svelte

@@ -31,6 +31,7 @@ class Filter {
 class FilePickerOptions {
   lateinit var filters: Array<Filter>
   var multiple: Boolean? = null
+  var pickerMode: String? = null
 }
 
 @InvokeArg
@@ -61,10 +62,19 @@ class DialogPlugin(private val activity: Activity): Plugin(activity) {
       // TODO: ACTION_OPEN_DOCUMENT ??
       val intent = Intent(Intent.ACTION_GET_CONTENT)
       intent.addCategory(Intent.CATEGORY_OPENABLE)
-      intent.type = "*/*"
 
-      if (parsedTypes.isNotEmpty()) {
+      if (args.pickerMode == "image") {
+        intent.type = "image/*"
+      } else if (args.pickerMode == "video") {
+        intent.type = "video/*"
+      } else if (args.pickerMode == "media") {
+        intent.type = "*/*"
+        intent.putExtra(Intent.EXTRA_MIME_TYPES, arrayOf("video/*", "image/*"))
+      } else if (parsedTypes.isNotEmpty()) {
+        intent.type = "*/*"
         intent.putExtra(Intent.EXTRA_MIME_TYPES, parsedTypes)
+      } else {
+        intent.type = "*/*"
       }
 
       intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, args.multiple ?: false)

plugins/dialog/android/src/main/java/DialogPlugin.kt

@@ -14,6 +14,16 @@ interface DialogFilter {
   name: string
   /**
    * Extensions to filter, without a `.` prefix.
+   *
+   * **Note:** Mobile platforms have different APIs for filtering that may not support extensions.
+   * iOS: Extensions are supported in the document picker, but not in the media picker.
+   * Android: Extensions are not supported.
+   *
+   * For these platforms, MIME types are the primary way to filter files, as opposed to extensions.
+   * This means the string values here labeled as `extensions` may also be a MIME type.
+   * This property name of `extensions` is being kept for backwards compatibility, but this may be revisited to
+   * specify the difference between extension or MIME type filtering.
+   *
    * @example
    * ```typescript
    * extensions: ['svg', 'png']
@@ -30,7 +40,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.
+   * On mobile platforms, if either:
+   * A) the {@linkcode pickerMode} is set to `media`, `image`, or `video`
+   * -- or --
+   * B) the filters include **only** either image or video mime types, the media picker will be displayed.
+   * Otherwise, the document picker will be displayed.
+   */
   filters?: DialogFilter[]
   /**
    * Initial directory or file path.
@@ -52,6 +69,13 @@ 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.
+   * If not provided, the dialog will automatically choose the best mode based on the MIME types or extensions of the {@linkcode filters}.
+   * On desktop, this option is ignored.
+   */
+  pickerMode?: PickerMode
 }
 
 /**
@@ -77,6 +101,16 @@ interface SaveDialogOptions {
   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 or extensions of the {@linkcode filters}.
+ *
+ * **Note:** This option is only supported on iOS 14 and above. This parameter is ignored on iOS 13 and below.
+ */
+export type PickerMode = 'document' | 'media' | 'image' | 'video'
+
 /**
  * Default buttons for a message dialog.
  *