chanced / filedrop-svelte

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

No way to disable the keydown-listener (space / enter key) #8

Closed IsAvaible closed 1 year ago

IsAvaible commented 2 years ago

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.

chanced commented 2 years ago

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.

IsAvaible commented 2 years ago

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 \ for adding files, the dropzone is an addition to it.

Card Design: image Click event on the avatar (hovering over it in the screenshot): image Drop event (anywhere) on the card (using this package): image

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.

chanced commented 2 years ago

I'll add it but give me a few days. I'm buried in another project at the moment.

chanced commented 2 years ago

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.

IsAvaible commented 2 years ago

Here you go: https://svelte.dev/repl/89fa80f119224ddabd5aa1735f227229?version=3.48.0 image 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.

chanced commented 2 years ago

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.

calebleungg commented 2 years ago

Had the same issue as reporter, but windowDrop does the job quite well. Thanks!