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 { UIEventSource } 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 LoginButton from "../Base/LoginButton.svelte"
  import { Translation } from "../i18n/Translation"
  import Camera from "@babeard/svelte-heroicons/solid/Camera"
  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
  import NoteCommentElement from "../Popup/Notes/NoteCommentElement"

  export let state: SpecialVisualizationState

  export let tags: UIEventSource<OsmTags>
  export let targetKey: string = undefined
  export let layer: LayerConfig
  export let noBlur: boolean = false
  /**
   * 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 errors = new UIEventSource<Translation[]>([])

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

        if (layer?.id === "note") {
          const uploadResult = await state?.imageUploadManager.uploadImageWithLicense(tags.data.id,
            state.osmConnection.userDetails.data?.name ?? "Anonymous",
            file, "image", noBlur)
          if (!uploadResult) {
            return
          }
          const url = uploadResult.absoluteUrl
          await state.osmConnection.addCommentToNote(tags.data.id, url)
          NoteCommentElement.addCommentTo(url, <UIEventSource<any>>tags, {
            osmConnection: state.osmConnection
          })
          return
        }

        await state?.imageUploadManager?.uploadImageAndApply(file, tags, targetKey, noBlur)
      } catch (e) {
        console.error(e)
        state.reportError(e, "Could not upload image")
      }
    }
    errors.setData(errs)
  }
</script>

<LoginToggle {state}>
  <LoginButton clss="small w-full" osmConnection={state.osmConnection} slot="not-logged-in">
    <Tr t={Translations.t.image.pleaseLogin} />
  </LoginButton>
  <div class="my-4 flex flex-col">
    <UploadingImageCounter {state} {tags} />
    {#each $errors as error}
      <Tr t={error} cls="alert" />
    {/each}
    <FileSelector
      accept="image/*"
      cls="button border-2 flex flex-col"
      multiple={true}
      on:submit={(e) => handleFiles(e.detail)}
    >
      <div class="flex items-center text-2xl w-full justify-center">
        {#if image !== undefined}
          <img src={image} aria-hidden="true" />
        {:else}
          <Camera class="h-12 w-12 p-1" aria-hidden="true" />
        {/if}
        {#if labelText}
          {labelText}
        {:else}
          <div class="flex flex-col">

            <Tr t={t.addPicture} />
            {#if noBlur}
          <span class="subtle text-sm">
            <Tr t={t.upload.noBlur}/>
          </span>
            {/if}
          </div>
        {/if}

      </div>
    </FileSelector>
    <div class="text-xs subtle italic">
      <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />
      <span class="mx-1">—</span>
      <Tr t={t.respectPrivacy} />
    </div>
  </div>
</LoginToggle>