Vue-image-chooser NPM

vue-image-chooser

This is vue plugin with simple component for choosing image. It supports easy implementation for image upload to the backend.

Installation

npm i vue-image-chooser --save

Registring plugin:

import VueImageChooser from 'vue-image-chooser'

Vue.use(VueImageChooser)

This will make vue-image-chooser component globaly available. Bellow is example how to use it with axios library

<div class="MyContent">
  <h1>Click on chooser to choose image</h1>
  <div style="width:400px;margin: 0 auto">
    <vue-image-chooser name="image-chooser" @change="uploadFile" :progress="progress" :error="error"/>
  </div>
</div>

export default {
  data() {
    return {
      progress: null,
      error: null,
    }
  },
  methods: {
    uploadFile(file) {
      this.progress = 0;
      let formData = new FormData();
      formData.append('image', file);
      var config = {
        onUploadProgress: progressEvent => {
          var percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          this.progress = percentCompleted
        }
      }
      try {
        const { data } = await axios.post(
          '/api/route/to/upload/image',
          formData,
          config
        )
      } catch (e) {
        this.error = 'Error has occured'
      }
    }
  }
}

Usage

The component takes five props:

name (String): Required prop, must be unique (you can consider it like id)
progress (Number): Number between 0-100. If it is null or 100 component consider uploading process finished.
error (String): Error message in case that server responded with error
height (String): Default is 350px
displayName (String): Default is Add Photo - text that appears below the camera image

The component emits change event with single file as data, when it recieve an image, after it can be uploaded as described above)