Image preview on Upload

Showing an image preview on image upload

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div id="app">
    <p>{{message}}</p>
    <image-field></image-field>
  </div>
</div>

<template id="image-field">
  <div class="ImageField__wrapper">
    <div class="form-group">
      <img v-bind:src="logoPreview" class="preview-image" v-on:click="openUpload">
    </div>
    <div class="form-group">
      <input type="file" id="file-field" v-on:change="updatePreview" style="display:none;">
    </div>
  </div>
</template>

CSS

.preview-image {
  max-width: 240px;
  max-height: 120px;
}

JavaScript

var imageField = Vue.extend({
  template: '#image-fhttps://jsfiddle.net/amitavroy/fqt1cy1v/#ield',

  data() {
    return {
      logoPreview: "http://24hourflex.com/wp-content/uploads/2015/12/upload.png"
    }
  },

  methods: {
	  openUpload () {
			document.getElementById('file-field').click()
    },
    
    updatePreview(e) {
      var reader, files = e.target.files

      if (files.length === 0) {
        console.log('Empty')
      }

      reader = new FileReader();

      reader.onload = (e) => {
        this.logoPreview = e.target.result
      }

      reader.readAsDataURL(files[0])
    }
  }
})

Vue.component('image-field', imageField)

new Vue({
  el: '#app',

  data: {
    message: 'Image upload'
  }
})