From 86baf130f3720f19b3c221ad87426211bee3f7bb Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 25 Nov 2024 12:03:26 +0100
Subject: [PATCH] Experiment: allow to use the default file picker, see #2202

---
 src/UI/Base/FileSelector.svelte |  2 +-
 src/UI/Image/UploadImage.svelte | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/UI/Base/FileSelector.svelte b/src/UI/Base/FileSelector.svelte
index e7958eebe..b4317656b 100644
--- a/src/UI/Base/FileSelector.svelte
+++ b/src/UI/Base/FileSelector.svelte
@@ -2,7 +2,7 @@
   import { createEventDispatcher, onDestroy } from "svelte"
   import { twMerge } from "tailwind-merge"
 
-  export let accept: string
+  export let accept: string | undefined
   export let multiple: boolean = true
 
   const dispatcher = createEventDispatcher<{ submit: FileList }>()
diff --git a/src/UI/Image/UploadImage.svelte b/src/UI/Image/UploadImage.svelte
index b96e12aa5..c5877e262 100644
--- a/src/UI/Image/UploadImage.svelte
+++ b/src/UI/Image/UploadImage.svelte
@@ -97,7 +97,7 @@
         <Tr t={error} cls="alert" />
       {/each}
       <FileSelector
-        accept="image/*"
+        accept=".jpg,.jpeg"
         cls="button border-2 flex flex-col"
         multiple={true}
         on:submit={(e) => handleFiles(e.detail)}
@@ -122,6 +122,14 @@
           {/if}
         </div>
       </FileSelector>
+      <FileSelector
+        accept={undefined}
+        cls="subtle as-link flex justify-center md:hidden"
+        multiple={true}
+        on:submit={(e) => handleFiles(e.detail)}
+      >
+        Use the file selector dialog
+      </FileSelector>
       <div class="subtle text-xs italic">
         <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />
         <span class="mx-1">—</span>