Vue Images Dragger

with this simple component you can upload Images or Drag Images

Features

• Simple to use
• choose images
• drag & drop images

Installation

Install Vue Images Dragger with npm

  npm i vue3-images-dragger

Setup

Import Images Dragger in main.ts

  import DraggerPlugin from 'vue3-images-dragger';
  import 'vue3-images-dragger/styles.css';
  app.use(DraggerPlugin)

Use as component

  import {ImagesDragger} from 'vue3-images-dragger';
  import 'vue3-images-dragger/styles.css';

Usage

<script setup lang="ts">
  import { ref } from 'vue';
  const images = ref()

  function getImages(data: any){
    images.value = data;
  }

  const previewImage = (img: Blob) => {
    return URL.createObjectURL(img)
  }
</script>

<template>
    <images-dragger @getImages="getImages"/>

    <div v-for="(img, i) in images" :key="i">
    <img :src="previewImage(img)" alt="">
    </div>
</template>

Props

You can pass a custom class as a props to design the component according to your needs

<images-dragger @getImages="test" customClass="custom-class"/>

css

custom-class {
    background-color: red !important;
    border: 2px solid yellow !important;
    font-size: 1.5rem;
  }

you can target font, background, width, height, border

🔗 Github Repo

Support Me