Vue component that provides drag and drop images upload with preview

Vue Images Upload Component

Vue component that provides drag and drop images upload with preview.

Features

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

Install

  1. install the package:

        npm i vue-upload-drop-images --save
    
  2. import it in your project

    .vue file:

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

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

Events

@change

Fired when new images are added or deleted it always returns uploaded files

Template:

        <UploadImages @change="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

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

GitHub

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