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

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

Setup

1 - Import the vue component locally in the script Tag

1<script>
2 import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
3
4  export default {
5    components:{
6      VueMultiImageUpload
7    }
8  }
9</script>

OR Global registration in your main.js

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

2 - In your Vue Template

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

⇃⇃⇃⇃⇂⇂⇂⇂

1<script>
2export default {
3    data(){
4      return {
5        component : {}
6      },
7    },
8    methods:{
9        images(e){
10          e.map(res=>console.log(res))
11        },
12        clear(){
13            this.component.clear = true;
14        }
15    }
16}
17
18</script>

Props & Type

Props	Data Type	Default	Optional	Description
max	Number	6	YES	Upload File Limit
Preview	Object	{ h:100, w:100 }	YES	Preview Size h => height
Resize	Object	No Default	YES	{ h:500, w:500 , keepRatio: true}
imageSize	Number	4e6	YES	Image File Size
alertTimeout	Number	3e3 (3s)	YES	Alert TimeOut
accept	Array	[image/png, image/jpg, image/gif]	YES	Image's Format Validate
dataReset	Object	false	No	Reset the child component data.
Options	Object	"Maximun","Ready","Selected"	YES	Input Box Message.

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

1<template>
2   <vue-multi-image-upload 
3     @data-image="images" 
4     :max="4" 
5     :image-size="4e6"  
6     :alert-timeout="3e3" 
7     :accept="imageType"
8     :preview="{ h:100,w:100 }"
9     :resize="{ h:500,w:500, keepRatio:true}" 
10     :data-reset="component" 
11     :options="options"  
12    />
13   <button @click="clear()">Clear</button>
14</template>
15
16<script>
17
18import { VueMultiImageUpload } from '@zakerxa/vue-multiple-image-upload';
19
20export default {
21    data(){
22        return {
23          component : {},
24          inputImages : [],
25          imageType : ['image/jpeg', 'image/png', 'image/gif']
26        }
27    },
28    components:{
29      VueMultiImageUpload
30    },
31    methods:{
32      images(e){
33        this.inputImages = e;
34      },
35      inputFormData(){
36        // The way to append images to FormData.
37        let formData = new FormData();
38        this.inputImages.map(img => formData.append('images[]',img));
39        return formData;
40      },
41      clear(){
42        this.component.clear = true;
43      }
44    }
45}
46</script>
47