vue-multiple-image-upload

A simple upload multiple image component for Vuejs

NPM Package

Development (NPM / Yarn)

npm run dev
yarn dev

Install

NPM / Yarn

Install the package:

npm install vue-multiple-image-upload
yarn add vue-multiple-image-upload

Then import it in your project

main.js

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

import VueUploadMultipleImage from 'vue-multiple-image-upload'

export default {
  components: {
    VueUploadMultipleImage,
  },
}

Browser global

<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-multiple-image-upload.js"></script>

Usage

You can simply view App.vue to see how to use vue-multiple-image-upload

How to use:

<vue-multiple-image-upload
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      :data-images="images"
      ></vue-multiple-image-upload>

images has the structure:

[
  {
    path: 'http://example.com/image.jpg',
    default: 1,
    highlight: 1,
    caption: 'caption to display. receive', // Optional
  }
]

Example

<template>
  <div id="my-strictly-unique-vue-multiple-image-upload" style="display: flex; justify-content: center;">
    <vue-multiple-image-upload
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      :data-images="images"
      idUpload="myIdUpload"
      editUpload="myIdEdit"
      ></vue-multiple-image-upload>
  </div>
</template>

<script>
import VueUploadMultipleImage from 'vue-multiple-image-upload'
import axios from 'axios'
export default {
  name: 'app',
  data () {
    return {
      images: []
    }
  },
  components: {
    VueUploadMultipleImage
  },
  methods: {
    uploadImageSuccess(formData, index, fileList) {
      console.log('data', formData, index, fileList)
      // Upload image api
      // axios.post('http://your-url-upload', formData).then(response => {
      //   console.log(response)
      // })
    },
    beforeRemove (index, done, fileList) {
      console.log('index', index, fileList)
      var r = confirm("remove image")
      if (r == true) {
        done()
      } else {
      }
    },
    editImage (formData, index, fileList) {
      console.log('edit data', formData, index, fileList)
    }
  }
}
</script>

<style>
#my-strictly-unique-vue-multiple-image-upload {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Options

Props

name	type	default	description
idUpload	String	image-upload	Id of input upload
idEdit	String	image-edit	Id of input edit
dragText	String	Drag images (multiple)	Drag Text
browseText	String	(or) Select	Browse Text
primaryText	String	Default	Primary Text
markIsPrimaryText	String	Set as default	Set default image
popupText	String	This image will be displayed as the default	Description default image
dropText	String	Drop your files here ...	Drag and drop
accept	String	image/gif,image/jpeg,image/png,image/bmp,image/jpg	Accept
dataImages	Array	[]	Array images
multiple	Boolean	true	Set upload multiple image
showPrimary	Boolean	true	Show text default image
maxImage	Number	5	Maximum upload image

Events

name	arguments	description
upload-success	(formData, index, fileList)	Upload image succcess
edit-image	(formData, index, fileList)	Edit image succcess
before-remove	(index, done, fileList)	Before delete image
mark-is-primary	(index, fileList)	Set default image
limit-exceeded	amount	Limit exceeded images when drop

Dependencies

• lodash
• vue-image-lightbox-carousel
• vue-popperjs