Skip to content

Zakerxa/Vue-Multi-Image-Upload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Multiple Image Upload (v1.0.10)

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

preview

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

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

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