Chore: rework image uploading, should work better now

src/UI/Image/UploadImage.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">/**
+ * Shows an 'upload'-button which will start the upload for this feature
+ */
+
+import type { SpecialVisualizationState } from "../SpecialVisualization";
+import { Store } from "../../Logic/UIEventSource";
+import type { OsmTags } from "../../Models/OsmFeature";
+import LoginToggle from "../Base/LoginToggle.svelte";
+import Translations from "../i18n/Translations";
+import Tr from "../Base/Tr.svelte";
+import UploadingImageCounter from "./UploadingImageCounter.svelte";
+import FileSelector from "../Base/FileSelector.svelte";
+import ToSvelte from "../Base/ToSvelte.svelte";
+import Svg from "../../Svg";
+
+export let state: SpecialVisualizationState;
+
+export let tags: Store<OsmTags>;
+export let image: string = undefined;
+if (image === "") {
+  image = undefined;
+}
+export let labelText: string = undefined;
+const t = Translations.t.image;
+
+let licenseStore = state.userRelatedState.imageLicense;
+
+function handleFiles(files: FileList) {
+  for (let i = 0; i < files.length; i++) {
+    const file = files.item(i);
+    console.log("Got file", file.name)
+    try {
+      state.imageUploadManager.uploadImageAndApply(file, tags.data);
+    } catch (e) {
+      alert(e);
+    }
+  }
+}
+
+</script>
+
+
+<LoginToggle {state}>
+
+  <Tr slot="not-logged-in" t={t.pleaseLogin} />
+  <div class="flex flex-col">
+
+    <UploadingImageCounter {state} {tags} />
+    <FileSelector accept="image/*" cls="button border-2 text-2xl" multiple={true}
+                  on:submit={e => handleFiles(e.detail)}>
+      <div class="flex items-center">
+
+        {#if image !== undefined}
+          <img src={image} />
+        {:else}
+          <ToSvelte construct={ Svg.camera_plus_svg().SetClass("block w-12 h-12 p-1 text-4xl ")} />
+        {/if}
+        {#if labelText}
+          {labelText}
+        {:else}
+          <Tr t={t.addPicture} />
+        {/if}
+      </div>
+    </FileSelector>
+    <div class="text-sm">
+      <Tr t={t.respectPrivacy} />
+      <a class="cursor-pointer" on:click={() => {state.guistate.openUsersettings("picture-license")}}>
+        <Tr t={t.currentLicense.Subs({license: $licenseStore})} />
+      </a>
+    </div>
+  </div>
+
+</LoginToggle>