@hichem-khial/vue-upload-multiple-crop-images

A Vue.js project

Usage no npm install needed!

<script type="module">
  import hichemKhialVueUploadMultipleCropImages from 'https://cdn.skypack.dev/@hichem-khial/vue-upload-multiple-crop-images';
</script>

README

vue-upload-multiple-image

A simple upload multiple images and cropping component for Vuejs NPM Package

Development (NPM / Yarn)

npm run dev
yarn dev

Install

NPM / Yarn

Install the package:

npm install vue-upload-multiple-crop-images
yarn add vue-upload-multiple-crop-images

Then import it in your project

main.js

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)
import VueUploadMultipleImage from 'vue-upload-multiple-crop-images'

export default {
  components: {
    VueUploadMultipleImage,
  },
}

Browser global

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

How to use:

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

images has the structure:

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

Example

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

<script>
import VueUploadMultipleImage from 'vue-upload-multiple-image'
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-upload-multiple-image {
  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 Drag Text
browseText String Browse Files Browse Text
primaryText String Primary Image Primary Text
markIsPrimaryText String Mark As Primary Image Set default image
popupText String This Image is Marked as Primary Description default image
dropText String Drop Images 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