Press "Enter" to skip to content

Simple Vue Component for File 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


See Demo And Download

Official Website(schumskie): Click Here

This superior jQuery/javascript plugin is developed by schumskie. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.