Create a modern image upload component with vuetify

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.

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

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

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.

<template v-slot:label="{ isActive }">
          <div>
            <div class="img-input-label">
              <div class="img-upload-icon" v-if="!isActive.value">
                <v-icon icon="mdi-cloud-upload"></v-icon>
              </div>
              <div class="img-upload-text">
                <p>select an image to upload</p>
              </div>
            </div>
          </div>
        </template>

Let the User Pick 🎯

Now, let's allow the user to pick an image:

    <v-file-input v-if="!image" accept="image/*" 
        @change="selectImg" v-model="image" >
<!--the label slot goes here-->
      </v-file-input>

• 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:

  <div v-if="image" class="image-preview">
      <img :src="imageUrl" alt="Your Image Preview" />
</div>

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:

 <v-icon
        class="remove-icon"
        @click="clearImage"
      >
        mdi-close-circle-outline
      </v-icon>

• @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 to meet your needs.