#Is there a way to have Dropzones accept images via paste?

2 messages · Page 1 of 1 (latest)

sleek tangle
#

onPaste doesn't do anything; I can't even attach a ref (to addEventListener) to <Dropzone>, even copying the example from docs results in an error, seen in codesandbox below.

https://mantine.dev/others/dropzone/#get-ref

https://codesandbox.io/s/sad-sun-u6o6f7?file=/src/Demo.tsx

CodeSandbox

sad-sun-u6o6f7 using @emotion/react, @mantine/carousel, @mantine/core, @mantine/dates, @mantine/dropzone, @mantine/form, @mantine/hooks, @mantine/modals, @mantine/notifications

Capture files from user with drag and drop

rugged dagger
# sleek tangle onPaste doesn't do anything; I can't even attach a ref (to addEventListener) to ...

I can't even attach a ref (to addEventListener)
you can attach a ref, however, the initial value is null and an empty [] useEffect will end up working with the ref whilst it is null. so you have to implement a check for the ref's existence after mounting

here's a solution i showed someone the other day, it will work in your case
#1093915412581863605 message

i've adapted your dropzone to include this. note that divs don't support pasting unless they have content editable enabled
https://codesandbox.io/s/pedantic-architecture-bfx85f?file=/src/Demo.tsx

there are some errors currently with the ref and i wouldn't recommend putting the onPaste handler in the dropzone itself, probably make an invisible element and/or use a global handler that mounts and unmounts alongside this component