Vue Multiple Image Upload

Welcome Back

Hello Everyone,My name is Zin Min Htet and here is my Facebook account.

Now, I will show you how to Upload Multiple Image using Vue-Component.

There is an image Preview, Resize, Remove, Add More, Drag & Drop features are included.

You can also limit the maximun number of file upload, the Image size , the Image type.

I add new feature alert Box, Resize Image, Preview also can be resize in version 1.0.8;

Here is Live Demo

Watch Now Live Demo.

Installation

npm i @zakerxa/vue-multiple-image-upload

Setup

1 - Import the vue component locally in the script Tag

<script>
 import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';

  export default {
    components:{
      VueMultiImageUpload
    }
  }
</script>

OR Global registration in your main.js

 import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
 const app = createApp(App);
 app.component("vue-multi-image-upload", VueMultiImageUpload);

2 - In your Vue Template

<template>
    <vue-multi-image-upload @data-image="images" :max="4" :data-reset="component"/>
</template>

⇃⇃⇃⇃⇂⇂⇂⇂

<script>
export default {
    data(){
      return {
        component : {}
      },
    },
    methods:{
        images(e){
          e.map(res=>console.log(res))
        },
        clear(){
            this.component.clear = true;
        }
    }
}

</script>

Props & Type

Explanation of usage

1.Images methods can listen child input data from parent the component.

  @data-image="images"
  images(e){
   e.map(res=>console.log(res))
  }

2.We can Resize the images by adding resize props

:resize={ h:500, w:500 ,keepRatio:true}
h => max-height of the image
w => max-width of the image

keepRatio true can resize your image without losing distortion
keepRatio false can resize your image exactly width & height

Default is False

3.We can limit the number of image to upload maximun

:max="limitNumber"

4.We can also limit the images size & type.

:image-size="imageSize" :accept="imageType"

this.imageSize = 2e6; // 2MB
ImageSize only allow 2MB else We will show alert msg to user.

this.imageType = ['image/jpeg', 'image/png', 'image/gif'];
imageType should be inside an array

5.And, There is one options.Options can change the message inputBox.

:options="options"
this.options.max = "Max";
this.options.ready = "Ready";
this.options.select = "Choosed";

6.If you want to reset child component data,You can use :data-reset props to passing Object

:data-reset="components"
this.component.clear = true;

Final State

That's all what you need

<template>
   <vue-multi-image-upload 
     @data-image="images" 
     :max="4" 
     :image-size="4e6"  
     :alert-timeout="3e3" 
     :accept="imageType"
     :preview="{ h:100,w:100 }"
     :resize="{ h:500,w:500, keepRatio:true}" 
     :data-reset="component" 
     :options="options"  
    />
   <button @click="clear()">Clear</button>
</template>

<script>

import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';

export default {
    data(){
        return {
          component : {},
          inputImages : [],
          imageType : ['image/jpeg', 'image/png', 'image/gif']
        }
    },
    components:{
      VueMultiImageUpload
    },
    methods:{
      images(e){
        this.inputImages = e;
      },
      inputFormData(){
        // The way to append images to FormData.
        let formData = new FormData();
        this.inputImages.map(img => formData.append('images[]',img));
        return formData;
      },
      clear(){
        this.component.clear = true;
      }
    }
}
</script>