-
Notifications
You must be signed in to change notification settings - Fork 13
Open
Description
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:
- 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)
}
}
Metadata
Metadata
Assignees
Labels
No labels