chanced / filedrop-svelte

File dropzone for Svelte.
MIT License
109 stars 12 forks source link

Uploading same file via click fails #18

Open owenoak opened 1 year ago

owenoak commented 1 year ago

When using the "click to upload" feature, the on:filedrop event doesn't fire when you attempt to upload the same file a second time. This appears to be a fairly well-known behavior of the <input type="file"> component:

Repro case should be something like the following:

// my-test.svelte
<script>
  function onDrop(event:CustomEvent) {
    console.info("dropped", event)
  }
</script>
<div 
    use:filedrop={{ clickToUpload: true }} 
    on:filedrop={onDrop}
/>

Run the above then:

In my app, I have added a timeout to my onDrop() which clears the field between clicks, which fixes the problem.
I'm sure there is a more elegant solution.

onDrop(event:CustomEvent) {
    console.info("dropped", event)
    const input = (event.target as HTMLElement)?.querySelector?.("input") as HTMLInputElement
    if (input) {
      setTimeout(() => {
        try {
          input.value = ""
        } catch (e) {}
      }, 100)
    }
}