Native support for directory uploads using the system dialog

[Conceptiks]

Hi there,

I just found your library and it serves my purpose pretty well! If I may, I would like to suggest that you add support for directory uploads using the system dialog via the webkitdirectory (caniuse.com) property. This way, folder uploads can be supported when uploading via the system dialog.

I am not quite sure how to do this currently, as using use:filedrop allows me to specifiy my own input[type="file"], but these elements are automatically hidden. This prevents me from showing two upload buttons instead of one ("upload files", "upload folder"), which is exactly what Google does with Google Drive.

See screenshot

I would love to hear your thoughts on this!

[Conceptiks]

Upon reading your docs again, I have found the option hideInput. Now, I can display to inputs, one for folder and one for files, but I am still unsure how I would now link these inputs to the filedrop instance.

[chanced]

I haven't used webkitdirectory before. I'll definitely include support for it if it is not currently feasible to do out of the box. Since I haven't used it, I don't have guidance at the moment.

To answer your question regarding wiring, if you provide your own input, it should be wired up automatically so long as it is a descendant of the container with use:filedrop The input is appended in the event an file input is not found. I'll investigate that later to ensure that's working properly.

As of right now, I don't know if the events are the same when it comes to uploading a directory. I would guess they are. Please let me know if you figure it out before I get a chance to look.

[Conceptiks]

Uploading a directory using a single custom input[type=file, webkitdirectory] works just fine. Haven't gotten around to checking the events just yet.

Regarding the wiring: I think your code does what it's supposed to as per your docs. When supplying two custom input elements, filedrop throws an error:

Uncaught (in promise) Error: FileDrop: container node may only contain a single file input unless input is specified in the options

So I suppose it's a question of allowing multiple (or two) inputs to be specified via the options. The only hacky way to achieve this is quite hacky: I might be able to bypass this limitation by somehow changing the filedrop:options={input:HTMLElement} on the fly before the dialog opens, but that seems quite troublesome.

[chanced]

Would it not be feasible to use two containers, each with their own filedrop action?

[Conceptiks]

@chanced This might be an easy solution and totally sufficient!

[Conceptiks]

@chanced On a side-note: I am not sure if it's my incompetence or a wrong understanding, but filedragenter/filedragleave events are both emitted multiple times when dragging files over the dropzone. I don't want to create another issue as I might have missed something, but here is a REPL reproducing: https://svelte.dev/repl/1d4838df20fe4a3f8e9b1b3ac9ed47f2

[chanced]

@Conceptiks Would mind creating an issue for that so I can track it? Also, that repl has an error

Thank you.