Drag And Drop Image Uploader With Live Preview

A Vue component to create a drag’n’drop image upload with support for instant preview.

How to use it:

1. Import and register the component.

import UploadImages from "vue-upload-drop-images";
export default {
  components: {
    UploadImages,
  },
}

2. Add the component to the template.

<template>
  <UploadImages @change="handleImages" />
</template>
export default {
  components: {
    UploadImages,
  },
  methods:{
    handleImages(files){
      console.log(files)
    }
  }
}

3. Available component props.

max: Number,
uploadMsg: String,
maxError: String,
fileError: String,
clearAll: String,

Preview:

Drag And Drop Image Uploader With Live Preview

Changelog:

07/02/2021

  • Bugfix

06/21/2021

  • Bugfix

v1.0.6 (06/09/2021)

  • Bugfix

Download Details:

Author: yudax42

Live Demo: https://vueupload.yudax.dev/

Download Link: https://github.com/yudax42/vue-upload-drop-images/archive/refs/heads/master.zip

Official Website: https://github.com/yudax42/vue-upload-drop-images

Install & Download:

# NPM
$ npm i vue-upload-drop-images

2 Comments

  1. John October 25, 2021
  2. John October 25, 2021

Add Comment