UX: show 'upload image from device' on desktop, add icon, attempt to fix "open camera" on ddg-browser, see #2406

public/css/index-tailwind-output.css

@@ -8781,6 +8781,11 @@ svg.apply-fill path {
     padding-right: 0.5rem;
   }
 
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .md\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;

src/UI/Image/UploadImage.svelte

@@ -15,6 +15,7 @@
   import { Translation } from "../i18n/Translation"
   import type { Feature } from "geojson"
   import Camera from "@babeard/svelte-heroicons/mini/Camera"
+  import ArrowUpTray from "@babeard/svelte-heroicons/solid/ArrowUpTray"
 
   export let state: SpecialVisualizationState
 
@@ -79,10 +80,11 @@
       {#each $errors as error}
         <Tr t={error} cls="alert" />
       {/each}
+      <!-- Take picture selector.  Must have image/*, capture=environment to work on DDG-browser/chromium based browsers -->
       <FileSelector
-        accept=".jpg,.jpeg,image/jpeg"
+        accept="image/*"
         capture="environment"
-        cls="button border-2 flex flex-col"
+        cls="button border-2 flex flex-col md:hidden"
         multiple={true}
         on:submit={(e) => {
           handleFiles(e.detail)
@@ -92,27 +94,28 @@
       >
         <div class="flex w-full items-center justify-center text-2xl">
           {#if image !== undefined}
-            <img src={image} aria-hidden="true" />
+            <img src={image} alt="" aria-hidden="true" />
           {:else}
             <Camera class="h-12 w-12 p-1" aria-hidden="true" />
           {/if}
-          {#if labelText}
-            {labelText}
-          {:else}
-            <div class="flex flex-col">
+          <div class="flex flex-col">
+            {#if labelText}
+              {labelText}
+            {:else}
               <Tr t={t.addPicture} />
-              {#if noBlur}
+            {/if}
+            {#if noBlur}
                 <span class="subtle text-sm">
                   <Tr t={t.upload.noBlur} />
                 </span>
-              {/if}
-            </div>
-          {/if}
+            {/if}
+          </div>
         </div>
       </FileSelector>
+      <!-- "Select images from device" - shown on desktop -->
       <FileSelector
-        accept=".jpg, .jpeg"
-        cls="flex justify-center md:hidden button"
+        accept=".jpg, .jpeg, image/jpeg"
+        cls="flex justify-center button"
         multiple={true}
         on:submit={(e) => {
           e.preventDefault()
@@ -120,8 +123,36 @@
           return handleFiles(e.detail, true)
         }}
       >
-        <Tr t={t.selectFile} />
+        <div class="hidden md:block">
+
+          <div class="flex w-full">
+            {#if image !== undefined}
+              <img alt="" src={image} aria-hidden="true" />
+            {:else}
+              <Camera class="h-12 w-12 p-1" aria-hidden="true" />
+            {/if}
+            <ArrowUpTray class="w-6 h-6  p-0.5 bg-white rounded-full self-end" style="margin-left: -1rem" />
+          </div>
+        </div>
+        <div class="flex flex-col ">
+
+          {#if labelText}
+            <div class="md:text-2xl text-center ">
+              {labelText}
+            </div>
+            <Tr t={t.selectFile} />
+          {:else}
+            <Tr cls="md:text-2xl text-center" t={t.selectFile} />
+          {/if}
+          {#if noBlur}
+                <span class="subtle text-sm">
+                  <Tr t={t.upload.noBlur} />
+                </span>
+          {/if}
+        </div>
+
       </FileSelector>
+
       <div class="subtle text-xs italic">
         <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />
         <span class="mx-1">—</span>