filedrop-svelte
filedrop-svelte copied to clipboard
Uploading same file via click fails
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)
}
}