Blog Detail


A Drag and Drop Upload Images Vue Component cover image

arrow_back A Drag and Drop Upload Images Vue Component

Vue-upload-drop-images is a Vue component that provides drag and drop images upload with preview. You can easily upload multiple files by drag and drop. You can also delete images and add new images easily. It is a lightweight and elegant image upload component. You can view its demo here.


This package has the following features.

  • Upload files by Drag & Drop
  • Upload files by clicking on the upload icon
  • Add multiple images
  • Delete Images
  • Append Images
  • Remove all images


You can easily install it via npm by running this command:

npm i vue-upload-drop-images --save


After installation, you’ve to import it in your project

vue file:

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

Next, you’ve to add the vue component in the template.

         <UploadImages />



This event is Fired when new images are added or deleted. It always returns uploaded files.

Add this in your template:

	<UploadImages @changed="handleImages"/>


                        "name": "Screenshot from 2021-02-23 12-36-33.png",
                        "size": 319775,
                        "type": "image/png",
                        "lastModified": 1614080193596


This Image Uploader comes with many options that you can utilize according to your need.


Type: Number

Required: false

default: null

    <!-- the user can upload up to 5 images-->
    <UploadImages :max="5"/>


Type: String

Required: false

default: Maximum files is

    <!-- the error message that the user sees when the uploaded images greater that the max images required-->
    <UploadImages maxError="Max files exceed"/>


Type: String

Required: false

default: Click to upload or drop your images here

    <!-- the message that the user see to upload the images -->
    <UploadImages uploadMsg="upload product images"/>


Type: String

Required: false

default: Unsupported file type

    <!-- the message that the user see when the uploaded file is not an image -->
    <UploadImages fileError="images files only accepted"/>


Type: String

Required: false

default: clear All

    <!-- the name of the remove all images button -->
    <UploadImages clearAll="remove all images" />

If you’re interested in this package You can view its full documentation on Github.

Published at : 11-08-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project