filedrop-svelte icon indicating copy to clipboard operation
filedrop-svelte copied to clipboard

Uploading same file via click fails

Open owenoak opened this issue 2 years ago • 0 comments

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:

  • https://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file

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:

  • click on the dropzone and select a file -- notice that the console message is printed.
  • click on dropzone again and select the same file -- notice that the console message is not printed this time.
  • click on dropzone and select a different file -- notice that the message is printed

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

owenoak avatar Feb 17 '23 17:02 owenoak