MapComplete/src/UI/Image/UploadImage.svelte

<script lang="ts">
    /**
     * Shows an 'upload'-button which will start the upload for this feature
     */

    import type { SpecialVisualizationState } from "../SpecialVisualization"
    import { ImmutableStore, 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 Camera_plus from "../../assets/svg/Camera_plus.svelte"
    import LoginButton from "../Base/LoginButton.svelte"

    export let state: SpecialVisualizationState

    export let tags: Store<OsmTags>
    export let targetKey: string = undefined
    /**
     * Image to show in the button
     * NOT the image to upload!
     */
    export let image: string = undefined
    if (image === "") {
        image = undefined
    }
    export let labelText: string = undefined
    const t = Translations.t.image

    let licenseStore = state?.userRelatedState?.imageLicense ?? new ImmutableStore("CC0")

    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, targetKey)
            } catch (e) {
                alert(e)
            }
        }
    }
</script>

<LoginToggle {state}>
  <LoginButton slot="not-logged-in" clss="small w-full">
    <Tr t={Translations.t.image.pleaseLogin} />
  </LoginButton>
  <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} aria-hidden="true" />
        {:else}
          <Camera_plus class="block h-12 w-12 p-1 text-4xl" />
        {/if}
        {#if labelText}
          {labelText}
        {:else}
          <Tr t={t.addPicture} />
        {/if}
      </div>
    </FileSelector>
    <div class="text-sm">
      <button
        class="link small "
        on:click={() => {
          state.guistate.openUsersettings("picture-license")
        }}
      >
        <Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
      </button>
        <Tr t={t.respectPrivacy} />
    </div>
  </div>
</LoginToggle>