filedrop-svelte
filedrop-svelte copied to clipboard
No way to disable the keydown-listener (space / enter key)
Problem The current configuration options do not allow disabling the keydown listener for the space and enter key. The only way to achieve this so far is to set the dropzone to disabled, which for obvious reasons does not lead to the desired result. Proposed Solution Therefore, I suggest adding a configuration option called "spaceToUpload" / "enterToUpload" / "keyDownToUpload" which can be set to false.
Edit: After digging through the code, I found an undocumented way to remove the keydown listener: hideInput and clickToUpload must both be set to false.
Those are native to the file input. Are you sure you want to disable them? You'll be blowing your accessibility out the water if you do.
I use the dropzone as a wrapper around a profile card editor, which allows the user to drop images anywhere on the card. Users can also click the profile image itself (or navigate to it with the tab key) instead to select an image with the native file picker. Since the text in the card is also editable, the dropzone's keydown event counteracts the user's ability to input spaces or new lines. Edit: I should add that the avatar integrates its own <input/> for adding files, the dropzone is an addition to it.
Card Design:
Click event on the avatar (hovering over it in the screenshot):
Drop event (anywhere) on the card (using this package):
However, this use case may be too specific. If you decide not to introduce the configuration option, I recommend other users with the same problem to try the solution mentioned in the first comment.
I'll add it but give me a few days. I'm buried in another project at the moment.
On second thought, if you can put together a small repl with a similar structure, such as a container that allows for dropping with an inner box element, I'll put together an alternative solution for you.
You really don't want to abandon space/enter to upload.
Here you go: https://svelte.dev/repl/89fa80f119224ddabd5aa1735f227229?version=3.48.0
I tried to keep it fairly minimal while maintaining the most important functions. The structure of the card as a dropzone and the avatar as an input should become evident through this.
In your case, since there isn't need for a second file drop, I'd enable windowDrop
and move filedrop
to a different element that doesn't contain the form:
https://svelte.dev/repl/dbefb0015d054676b3232c591b1254ae?version=3.48.0
This way you get accessibility and your desired functionality. If you have need for multiple file dropzones, limit the containing elements within the form.
Had the same issue as reporter, but windowDrop
does the job quite well. Thanks!