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 { 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 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

  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}>
  <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>