## We Can All Agree 🤔 Let's face it—HTML file pickers are not the prettiest. Even Vuetify’s file-input component, while functional, is pretty basic and doesn’t offer an image preview, which isn't great for user experience. ![basic file input component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hrdg9fz2pa1k1gebj64.PNG) ## Vuetify Slots to the Rescue 🚀 Luckily, Vuetify allows us to customize its components using slots. In this case, we can use slots to jazz up the label and create a more user-friendly experience. So here's what we're building ![image preview component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nno3zklyf6kajsxkd23q.gif) ## The Concept 🎨 The concept here is to hide the file-input if the image is there and show the preview instead, and vice versa. as shown below ![Demonstration of the concept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whbn94k5k1bc9k2ku2sb.gif) First we create two variables image (the file selected by the user) - imageUrl (we'll use it to render the image later). The magic happens in the label slot, where we can enlarge the label and even add a text and icon right inside it! ## Let's Customize the Component 🛠️ : We can achieve this by playing around with the label slot. Check out the code below—it's all about adding some img and p tags. With a bit of CSS, we can make the label look larger and more appealing. ```vue ``` ## Let the User Pick 🎯 Now, let's allow the user to pick an image: ```vue ``` - `v-model="image"` binds the selected image to image variable. - `@change="selectImg"` triggers the selectImg function when an image is chosen (more on that later). - `v-if="!image"` hides the input if there's already an image selected. ## Preview the Image 🖼️ Once the user picks an image, we hide the file-input and show a preview: ```vue

``` `v-if="image"` show the preview only if there is an image. `:src="imageUrl"` `img` source to `FileReader` _{(refer to the source code)_{## Your user is stuck 🤷
If the user wants to remove or replace the image, we can easily add a delete button on top of the preview:
```vue

mdi-close-circle-outline

```
- `@click="clearImage"` : when the icon is pressed we call a function that clears the image.

Here's a closure you can add to the end of your blog:

## Wrapping It Up 🎁
And there you have it, a user-friendly image uploader with Vuetify! By customizing the file-input with slots, you’ve made the process smoother and more intuitive for users. Not only does this improve the visual appeal of your app, but it also enhances the overall user experience. So go ahead, tweak the [code ](https://github.com/3aluw/image-preview) to meet your needs.}}

3aluw

Create a modern image upload component with vuetify

Join Our Newsletter. No Spam, Only the good stuff.