thecodejack/svelte-file-dropzone

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

huntabyte opened this issue · 6 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.

Can I one-up this one.

Yeah def - lemme take a look tonight or tomorrow

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!

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

This should be released in 2.0.8

That's awesome. Thank's a lot!