Vue-formulate: Add slot to upload area mask (for better utility framework support)

[chrisgereina]

As the title suggests, I'm trying to style an image input with custom classes, Tailwind particularly, my intention with this is to replace the default icon that is displayed in the upload area (see below)

So, taking a look at the Custom Class Keys for files there's a class called uploadAreaMask that is "An additional element positioned immediately after the used for stylistic reasons." but it doesn't clarify on how to best use this or provide a handy graphic on what it styles like the general classes (see below)

So, taking a peek at the source for the image upload example with the browser inspector we can see that indeed the upload area mask is an element that is positioned immediately after the input for stylistic reasons and we also see that the example accomplishes the style using the ::before selector

Here are my questions:

1. How can we access something like the ::before selector using the FormulateInput class scheme? I ask generally if this has been added or will be added, but in this specific instance I tried things like: uploadAreaMask-before-class uploadAreaMask-Before-class uploadAreaMaskBefore-class and none seemed to work
2. What is the correct way to use uploadAreaMask ? It seems like it styles the element, but of course nothing shows up inside it unless you add markup of some sort
3. Is the right thing to use slots for this? It seems like a bit of overkill in this case and kind of defeats the purpose of VueFormulate, but of course it exists

I appreciate any help on this!

Edit: I realize that the obvious approach here is to just declare a new class with a before selector and then pass it to uploadMask but using the thinking of VueFormulate and Tailwind which share a common thread I think it's worth considering whether it's possible to do this without having to delve into custom styling and keep a utility-first approach

[chrisgereina]

Side note, definitely willing to help implement this just wanted to get some direction on where this consideration is

[justin-schroeder]

Hi @christianechevarria. I'll do my best to answer these:

1. 
   
   • How can we access something like the ::before selector using the FormulateInput class scheme? I ask generally if this has been added or will be added, but in this specific instance I tried things like: uploadAreaMask-before-class uploadAreaMask-Before-class uploadAreaMaskBefore-class and none seemed to work
   
   

I don't believe tailwind land is going to let you do that. However, you don't need to access ::before if you're using tailwind unless you're mixing the snow theme with tailwind which is no recommended really.

1. 
   
   • What is the correct way to use uploadAreaMask ? It seems like it styles the element, but of course nothing shows up inside it unless you add markup of some sort
   
   

The upload area mask is intended to be used to style the dropzone for the upload. Often a good practice for styled dropzones is to "stretch" the file upload across some particular wrapper by using position absolute, and maybe opacity 0 so it retains all of it's standard functionality, but often you want that dropzone to be styled too. The mask is intended to serve that purpose.

1. 
   
   • Is the right thing to use slots for this? It seems like a bit of overkill in this case and kind of defeats the purpose of VueFormulate, but of course it exists.
   
   

Possibly. "Slots components" are one of my favorite extension patterns for Vue Formulate that allows custom styling and layouts to be highly reusable as apposed to standard scoped slots. It might be nice to add a new slot for the mask area for tailwind users since they don't have easy access to create pseudo elements.

I'm all for trying to make the file input a easier for utility frameworks. As you mentioned, while Vue Formulate isn't not exclusively utility-framework friendly, it is intended to be _easy_ to use for as wide an audience as possible. I guess I'm open to hearing suggestions on how to improve this 🤷‍♂️

Thanks for the good write up.

[chrisgereina]

Hi @justin-schroeder thanks for getting back to me so promptly, I appreciate the response! uploadAreaMask makes a lot more sense as a name given the explanation you gave.

Often a good practice for styled dropzones is to "stretch" the file upload across some particular wrapper by using position absolute, and maybe opacity 0 so it retains all of it's standard functionality, but often you want that dropzone to be styled too. The mask is intended to serve that purpose.

This is a great explanation, thank you. As a side question, what about adding text within the dropzone? Would it be better at that point to use a slot? If so, what would that look like? Or can it be defined via a prop currently?

I ask because what I'm doing is basically merging @tailwindlabs' TailwindUI + VueFormulate and one of the patterns they use for form upload is to have an icon plus the equivalent of help-class text all within the dropzone which groups everything nicely from a UI standpoint.

They achieve it by adding margin the equivalent uploadArea element and text centering in a child element that contains the SVG and text elements. It doesn't require the ::before selector but also doesn't explicitly use an input so doesn't conform to the semantic goals of VueFormulate -- I think the best way would be to do what you suggested with the ability to add the slot for arbitrary styling capabilities.

P.S. Normally I would normally post a picture of the TailwindUI setup, but due to licensing I don't believe I can so just sticking to the description above haha

P.S.S. I'd be happy to contribute to the documentation for this as well

[justin-schroeder]

Yeah I think maybe we should add a slot inside that dropzone for tailwind users.

[justin-schroeder]

Good news @christianechevarria this slot is now a thing in the release/2.5.0 branch. It's named...drumroll...uploadAreaMask 😳 😉

Early docs here:

https://vueformulatecom-git-release-250.braid.vercel.app/guide/inputs/types/file/#slots