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.

Features

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

Installation

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

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

Usage

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

vue file:

     <script>
         import UploadImages from "vue-upload-drop-images"
         ...
         export default {
                 components: {
                     UploadImages,
                 },
         ...
     </script>

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

     <template>
     ...
         <UploadImages />
     ...
     </template>

Events

@changed

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

Add this in your template:

	<UploadImages @changed="handleImages"/>

Script:

        methods:{
            handleImages(files){
                console.log(files)
                /*
                  [
                    {
                        "name": "Screenshot from 2021-02-23 12-36-33.png",
                        "size": 319775,
                        "type": "image/png",
                        "lastModified": 1614080193596
                        ...
                    },
                    ...
                    ]
                 */
            }
        }

Props

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

max

Type: Number

Required: false

default: null

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

maxError

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"/>

uploadMsg

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"/>

fileError

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"/>

clearAll

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.