Create a modern image upload component with vuetify

Abdou — Tue, 27 Aug 2024 12:58:01 +0000

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.

Filter VS splice: the Case of the unfulfilled Orders (PART 1)

Abdou — Wed, 03 Jan 2024 16:41:37 +0000

Building an ecommerce store had its fair share of challenges, and one particular puzzle I faced was efficiently removing successfully placed orders from the shopping cart. In this blog post, I'll walk you through the journey of solving this coding puzzle.

The Challenge at Hand

As the development of your ecommerce store progresses, managing the shopping cart can became harder.
I wanted (needed) to Remove items that had already been successfully ordered from the cart.

Let us see the puzzle first

Let's imagine that the user has 10 items in his cart and processed the checkout.

  const cart = [{ id: 0, name: 'Item 0' },
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
  { id: 5, name: 'Item 5' },
  { id: 6, name: 'Item 6' },
  { id: 7, name: 'Item 7' },
  { id: 8, name: 'Item 8' },
  { id: 9, name: 'Item 9' },
  { id: 10, name: 'Item 10' }
]

For an unclear reason, the server accepted just 2 orders !

It returned the successful orders and asked the user to place his orders after a moment.
successful orders:

const orders = [{id:8}, {id : 5}]

Now we need to remove the items with ids 5 and 8 from the cart. Take a moment to ponder on this challenge 😊..

And my mind went to...

two ways.

1- We can combine filter with every.
We will create a new array which contains only the procuts that didn't get ordered.we can use filterto iterate on the cart array (to remove the ordered items).
each time it checks if the product id is not in any of the orders array(which mean that the order failed) with the help of every
every here iterates over the orders array and returns true if the order id is not in the cart array indicating that the order failed
we got something like this :

const failedOrders = cart.filter((product)=> orders.every((order)=> order.id !== product.id))
cart = failedOrders ;

2- We can combine forEach with splice.
It is more straightforward. We can iterate over orders. On each order, we take the Id and look for its index on the cart array with the help of findIndex
then remove that item from the cart using splice

orders.forEach((order)=>{
// Find the index of the ordered product in the cart
   const productIndex = products.findIndex((product) => order.id === product.id)
// Remove the ordered product from the cart using splice
 if (productIndex !== -1) {
   products.splice(productIndex,1)}
  })

I found 2 solutions but which one is better ?

I tested the two solutions and they worked well.
From a readability and simplicity perspective, I would prefer the 2nd. But from the performance perspective which one is better? and why?.
See you in PART 2

DEV Community: Abdou