Experiment: more finetuning of the filepickers, see #2202

langs/en.json

@@ -588,7 +588,7 @@
         "translationMode": "Toggle translation mode on or off"
     },
     "image": {
-        "addPicture": "Add picture",
+        "addPicture": "Take a picture",
         "currentLicense": "Your images will be published under {license}",
         "doDelete": "Remove image",
         "dontDelete": "Cancel",
@@ -622,6 +622,7 @@
         "pleaseLogin": "Please log in to add a picture",
         "processing": "The server is processing your image",
         "respectPrivacy": "Do not upload from Google Maps, Google Streetview or other copyrighted sources.",
+        "selectFile": "Select a picture from your device",
         "toBig": "Your image is too large as it is {actual_size}. Please use images of at most {max_size}",
         "unlink": {
             "button": "Unlink picture",

src/Logic/ImageProviders/ImageUploadManager.ts

@@ -157,14 +157,15 @@ export class ImageUploadManager {
         blob: File,
         targetKey: string | undefined,
         noblur: boolean,
-        feature?: Feature
+        feature?: Feature,
+        ignoreGps: boolean = false
     ): Promise<UploadResult> {
         this.increaseCountFor(this._uploadStarted, featureId)
         let key: string
         let value: string
         let absoluteUrl: string
         let location: [number, number] = undefined
-        if (this._gps.data) {
+        if (this._gps.data && !ignoreGps) {
             location = [this._gps.data.longitude, this._gps.data.latitude]
         }
         if (location === undefined || location?.some((l) => l === undefined)) {

src/UI/Base/FileSelector.svelte

@@ -3,6 +3,7 @@
   import { twMerge } from "tailwind-merge"
 
   export let accept: string | undefined
+  export let capture: string | undefined = undefined
   export let multiple: boolean = true
 
   const dispatcher = createEventDispatcher<{ submit: FileList }>()
@@ -98,5 +99,6 @@
     {multiple}
     name="file-input"
     type="file"
+    {capture}
   />
 </form>

src/UI/Image/UploadImage.svelte

@@ -38,7 +38,7 @@
 
   let errors = new UIEventSource<Translation[]>([])
 
-  async function handleFiles(files: FileList) {
+  async function handleFiles(files: FileList, ignoreGps: boolean= false) {
     const errs = []
     for (let i = 0; i < files.length; i++) {
       const file = files.item(i)
@@ -57,7 +57,8 @@
             file,
             "image",
             noBlur,
-            feature
+            feature,
+            ignoreGps
           )
           if (!uploadResult) {
             return
@@ -97,7 +98,8 @@
         <Tr t={error} cls="alert" />
       {/each}
       <FileSelector
-        accept=".jpg,.jpeg"
+        accept="image/*"
+        capture="environment"
         cls="button border-2 flex flex-col"
         multiple={true}
         on:submit={(e) => handleFiles(e.detail)}
@@ -112,7 +114,7 @@
             {labelText}
           {:else}
             <div class="flex flex-col">
-              <Tr t={t.addPicture} />
+              <Tr t={t.addPicture}/>
               {#if noBlur}
                 <span class="subtle text-sm">
                   <Tr t={t.upload.noBlur} />
@@ -123,12 +125,12 @@
         </div>
       </FileSelector>
       <FileSelector
-        accept={undefined}
-        cls="subtle as-link flex justify-center md:hidden"
+        accept=".jpg, .jpeg"
+        cls="flex justify-center md:hidden button"
         multiple={true}
-        on:submit={(e) => handleFiles(e.detail)}
+        on:submit={(e) => handleFiles(e.detail, true)}
       >
-        Use the file selector dialog
+        <Tr t={t.selectFile}/>
       </FileSelector>
       <div class="subtle text-xs italic">
         <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />