<template>
<div>
	<span class="btn btn-file">
		<i class="fa fa-camera"></i>
		<input name="image" type="file" @change="onFileChange" accept="image/*">
	</span>
	<div v-if="uploadImage" class="replyImage">
		<img :src="uploadImage" />
		<button @click="removeImage"><i class="fa fa-close"></i></button>
	</div>
</div>
</template>

<script>
  export default {
		mounted(){
			if(this.image){
				this.uploadImage=this.image;
			}
		},
		data:function(){
      return {
        uploadImage: ''
			}
    },
    methods:{
      onFileChange(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
          return;
        this.createImage(files[0]);
      },
      createImage(file) {
        var image = new Image();
        var reader = new FileReader();
        var vm = this;

        reader.onload = function(e){
          this.uploadImage = e.target.result;
        }.bind(this);
        reader.readAsDataURL(file);
      },
      removeImage: function (e) {
        this.uploadImage = '';
      }
    },
		props:['image']
  }
</script>