File upload

We created a small custom component that let's you upload & preview images. It is very handy for avatar uploads & profile picture uploads.

import {ImageUpload} from 'src/components'

Global usage

Vue.component(ImageUpload.name, ImageUpload)

For local usage

export default {
  components: {
    ImageUpload
  }
}

Regular image

preview
Select Image 
<template>
<div>
  <image-upload @change="onImageChange" select-text="Select Image" />  
</div>
</template>
<script>
export default {
  data() {
    return {
      images: {
        regular: null
      }
    }
  },
  methods: {
     onImageChange(file) {
        this.images.regular = file;
      }
  }
}
</script>
preview
Add photo 
<template>
<div>
   <image-upload
      type="avatar"
      select-text="Add photo"
      @change="onAvatarChange">
   </image-upload>
</div>
</template>
<script>
export default {
  data() {
    return {
      images: {
        avatar: null
      }
    }
  },
  methods: {
     onAvatarChange(file) {
      this.images.avatar = file;
     }
  }
}
</script>

With predefined image

preview
Add photo 
<div>
  <image-upload
        type="avatar"
        src="../img/default-avatar.png"
        select-text="Add photo">
     </image-upload>
</div>

Image upload Props

Image upload Slots

Name Description Params
change When selected file changes Uploaded file

← Select →