Fix #1617: give correct error message if an image is too large

src/Logic/ImageProviders/ImageUploadManager.ts

@@ -8,6 +8,7 @@ import { OsmConnection } from "../Osm/OsmConnection"
 import { Changes } from "../Osm/Changes"
 import Translations from "../../UI/i18n/Translations"
 import NoteCommentElement from "../../UI/Popup/Notes/NoteCommentElement"
+import { Translation } from "../../UI/i18n/Translation"
 
 /**
  * The ImageUploadManager has a
@@ -72,6 +73,19 @@ export class ImageUploadManager {
         }
     }
 
+    public canBeUploaded(file: File): true | {error: Translation} {
+        const sizeInBytes = file.size
+        const self = this
+        if (sizeInBytes > this._uploader.maxFileSizeInMegabytes * 1000000) {
+             const error = Translations.t.image.toBig.Subs({
+                actual_size: Math.floor(sizeInBytes / 1000000) + "MB",
+                max_size: self._uploader.maxFileSizeInMegabytes + "MB",
+            })
+            return {error}
+        }
+        return true
+    }
+
     /**
      * Uploads the given image, applies the correct title and license for the known user.
      * Will then add this image to the OSM-feature or the OSM-note
@@ -84,19 +98,14 @@ export class ImageUploadManager {
         tagsStore: UIEventSource<OsmTags>,
         targetKey?: string
     ): Promise<void> {
-        const sizeInBytes = file.size
+
-        const tags = tagsStore.data
+        const canBeUploaded = this.canBeUploaded(file)
-        const featureId = <OsmId>tags.id
+        if(canBeUploaded !== true){
-        const self = this
+            throw canBeUploaded.error
-        if (sizeInBytes > this._uploader.maxFileSizeInMegabytes * 1000000) {
-            this.increaseCountFor(this._uploadStarted, featureId)
-            this.increaseCountFor(this._uploadFailed, featureId)
-            throw Translations.t.image.toBig.Subs({
-                actual_size: Math.floor(sizeInBytes / 1000000) + "MB",
-                max_size: self._uploader.maxFileSizeInMegabytes + "MB",
-            }).txt
         }
 
+        const tags = tagsStore.data
+        const featureId = <OsmId>tags.id
         const licenseStore = this._osmConnection?.GetPreference("pictures-license", "CC0")
         const license = licenseStore?.data ?? "CC0"
 

src/UI/Image/UploadImage.svelte

@@ -13,6 +13,7 @@
   import FileSelector from "../Base/FileSelector.svelte"
   import Camera_plus from "../../assets/svg/Camera_plus.svelte"
   import LoginButton from "../Base/LoginButton.svelte"
+  import { Translation } from "../i18n/Translation"
 
   export let state: SpecialVisualizationState
 
@@ -31,16 +32,25 @@
 
   let licenseStore = state?.userRelatedState?.imageLicense ?? new ImmutableStore("CC0")
 
+  let errors = new UIEventSource<Translation[]>([])
+
   function handleFiles(files: FileList) {
+    const errs = []
     for (let i = 0; i < files.length; i++) {
       const file = files.item(i)
       console.log("Got file", file.name)
       try {
+        const canBeUploaded = state?.imageUploadManager?.canBeUploaded(file)
+        if (canBeUploaded !== true) {
+          errs.push(canBeUploaded.error)
+          continue
+        }
         state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey)
       } catch (e) {
         alert(e)
       }
     }
+    errors.setData(errs)
   }
 </script>
 
@@ -50,6 +60,9 @@
   </LoginButton>
   <div class="flex flex-col">
     <UploadingImageCounter {state} {tags} />
+    {#each $errors as error}
+      <Tr t={error} cls="alert" />
+    {/each}
     <FileSelector
       accept="image/*"
       cls="button border-2 text-2xl"