svelte-file-dropzone icon indicating copy to clipboard operation
svelte-file-dropzone copied to clipboard

forward `$$restProps` or expose `id` prop or `rootRef`

Open huntabyte opened this issue 1 year ago • 2 comments

I have a button in my app that, when clicked, I want the same behavior as when a user clicks the dropzone.

Currently, we can't pass any additional data-* attributes or id to the underlying <div> to get a reference to it.

huntabyte avatar May 01 '24 21:05 huntabyte

Can I one-up this one.

roberrrt-s avatar Aug 29 '24 09:08 roberrrt-s

Yeah def - lemme take a look tonight or tomorrow

arackaf avatar Aug 29 '24 18:08 arackaf

My hacky workaround currently is:

    function openFileInput() {
        // I hate everything about this but it works.
        const input = document.querySelector('.drop-element input[type="file"]') as HTMLInputElement;

        if(input) {
            input.click();
        }
    }

Where .drop-element is the dropzoner per

<Dropzone containerClasses={`drop-element${dragged || files.accepted.length > 0 || files.rejected.length > 0 ? '' : ' hidden'}`} on:drop={dropHandler} disableDefaultStyles={true} on:dragenter={dragEnterHandler} on:dragleave={dragLeaveHandler}>

But yeah, it works quite well!

roberrrt-s avatar Sep 01 '24 21:09 roberrrt-s

Gah - sorry! I promise I'll get to this tomorrow.

arackaf avatar Sep 01 '24 21:09 arackaf

This should be released in 2.0.8

arackaf avatar Sep 01 '24 22:09 arackaf

That's awesome. Thank's a lot!

roberrrt-s avatar Sep 02 '24 11:09 roberrrt-s