Blog Detail

11

Aug
A Drag and Drop Upload Images Vue Component cover image

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.

Published at : 11-08-2021

Author : Rizwan Aslam
AUTHOR
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.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project