"File/folder drag and drop" component

[HovKlan-DH]

The <wa-input></wa-input> states there is no support of type="file", and its current implementation seems to lack styling, so for now I am continuing using Bootstrap for this.

However, once time allow, would it then be possible to have a component that supports dragging one or more files into a box? Maybe even a complete folder structure, if this is possible?

It should be possible to remove files/folders again from the list, if they were put there in mistake. If no better idea, then maybe styling could be something alike the multiple <wa-select></wa-select>?

[KonnorRogers]

I'm not sure I fully follow what you're asking in regards to styling. But we do have plans to add a file uploader component that support drag and drop.

It most likely wouldn't look like a filter-pill. I would guess we do something like each file displays below the input with a small preview and and "X" to be able to clear it.

Similar in design to this issue: shoelace-style/shoelace#813

@lindsaym-fa feel free to correct me if you have other ideas for the design of the file uploader!

And my best guess is it will not be part of <wa-input> but instead be a separate component. Polymorphic components are an easy way to get into trouble.

[HovKlan-DH]

This is exactly what I am looking for - I assume 😀 Do you think it could be able to handle multiple files in one drag/drop?

In terms of the missing styling - if I e.g. has this code here:

<wa-input type="file"></wa-input>

<br /><br />

<input type="file" />

Then it looks like this:

I don't think the styling for the <wa-input type="file"></wa-input> is usable as-is (personal opinion of course), and I will rather just use a normal <input type="file" /> as it looks better - at least for the cases I am working with.

But your idea with a new component sounds great 👌 I will be patient and see what happens, thanks a lot.