MapComplete/src/UI/Base/FileSelector.svelte

<script lang="ts">

  import { createEventDispatcher } from "svelte";
  import { twMerge } from "tailwind-merge";

  export let accept: string;
  export let multiple: boolean = true;

  const dispatcher = createEventDispatcher<{ submit: FileList }>();
  export let cls: string = "";
  let drawAttention = false;
  let inputElement: HTMLInputElement;
  let id = Math.random() * 1000000000 + "";
</script>

<form>
  <label class={twMerge(cls, drawAttention ? "glowing-shadow" : "")} for={"fileinput"+id}>
    <slot />

  </label>
  <input {accept} bind:this={inputElement} class="hidden" id={"fileinput"  + id} {multiple} name="file-input"
         on:change|preventDefault={() => {
  drawAttention = false; 
  dispatcher("submit", inputElement.files)}}
         
         on:dragend={ () => {drawAttention = false}}
         on:dragover|preventDefault|stopPropagation={(e) => {
           console.log("Dragging over!")
             drawAttention = true
             e.dataTransfer.drop = "copy"
           }}
         on:dragstart={ () => {drawAttention = false}}
         on:drop|preventDefault|stopPropagation={(e) => {
           console.log("Got a 'drop'")
          drawAttention = false
          dispatcher("submit", e.dataTransfer.files)
        }}
         type="file"
  >
</form>