Photo Uploader With Live Preview - vue-image-chooser

Install & Download:

# NPM
$ npm i vue-image-chooser

Description:

image-chooser is a Vue.js component that aims to provide a simple way to upload images to a web server.

How to use it:

1. Import and register the component.

import VueImageChooser from 'vue-image-chooser'
Vue.use(VueImageChooser);

2. Add the <vue-image-chooser /> component to the app.

<vue-image-chooser 
  name="image-chooser" 
  @change="uploadFile" 
  :progress="progress" 
  :error="error"
/>

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(
          '/path/to/server/',
          formData,
          config
        )
      } catch (e) {
        this.error = 'Error has occured'
      }
    }
  }
}

3. Available props.

name: {
  required: true,
  type: String
},
baseSrc: {
  type: String,
  default: ""
},
height: {
  type: String,
  default: "350px"
},
displayName: {
  type: String,
  default: "Add Photo"
},
error: {
  default: null,
  validator: function(value) {
    return (
      value === null || Array.isArray(value) || typeof value === "string"
    );
  }
},
progress: {
  type: Number,
  default: null
}