Simple Vue Component for Photo Uploader With Preview

Image picker is a Vue plugin with a simple image selection component. It supports the easy implementation of uploading images to the background.

upload image in html and display javascript, image upload javascript, javascript upload image to server, upload image in html and display, upload image on button click in javascript

How to make use of it:

Install and download:

# NPM
$ npm i vue-image-chooser

1. Import and register the component.

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

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

<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. Props are available.

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
}

Photo Uploader With Live Preview, vue image chooser Plugin/Github, upload image in folder using javascript, javascript upload file