Allow Tailwind Classes for uploader component

[tpcgold]

Is your feature request related to a problem? Please describe.
Currently it's not possible to use a DropZone with the uploader component

Describe the solution you'd like
I'd like to have a tailwind dropzone:
https://flowbite.com/docs/forms/file-input/#dropzone
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#define_the_drop_zone
https://larainfo.com/blogs/tailwind-css-drag-and-drop-file-upload-ui/

for the uploader component

Describe alternatives you've considered
Custom web_component

[richard-to]

Yeah, I think having an upload component that can do drag and drop would be nice, because I think it's an important aspect of improving multi-modal support. It's something we considered for the initial version of the uploader, but we decided to go with the most minimal implementation to start.

I think one issue we ran into was how to make the styling work for the drag and drop since there can be a lot of different variations of how people want it styled. Or whether we should use a less flexible approach.

Definitely one big drawback is that Angular Components doesn't provide one out of the box, which means more effort on our side to build out the functionality.

---

In terms of the drag / drop functionality, what functionality would you be looking for specifically, i.e. flexible styling, drag and drop, click to upload, multi file upload, removing uploads, upload progress, etc.

---

Also is there a particular reason why you don't want to do a web component? I remember you mentioning previously that you preferred not to use web components (though I can't remember the reason why not).

---

We have somewhat limited bandwidth at the moment, so not sure we can prioritize this in the near term, but I do think this is important functionality to make Mesop easier to use out of the box.

[tpcgold]

I currently implemented a drag & drop field including a click functionality

not so nice, but works. looking at chatgpt a button and a global drag and drop looks way better. (might be a possible change I will implement)
it's currently a mesop web component implementation with an unlimited list of files, including size and file type restrictions.

Additional server-side changes (security and limiting) and an option to drop single files still needs to be implemented
(hence I cannot share it atm. as it's not finished yet)

I'm not so familiar with Angular but seems a custom web component seems to be the right way in this case. I just didn't wanna do it this way because with custom web components I could just do it without mesop as well without the functional hassle with Mesop around.

[richard-to]

Oh nice! That looks pretty good. Though I agree with you about the button + global drag and drop combo since it uses less space.

Thanks for your thoughts on why you would prefer not to use web components. I think that makes a lot of sense. I think one of our hopes with web components to is to build up a community of shared web components that people can easily drop into their apps. But I think right now we don't have a way to make that easy for people to share their custom web components. So right now there's an issue of developing some community mindshare to share the components, making them more easily discoverable, and making them easy to download. I think the latter two things are easily doable. Building out the web component ecosystem will be much tougher, but will be a bit easier with the latter two in place.

But yeah, if you want to share your uploader component when it's finished, that would be really cool. But only if you want to.