<template>
  <div class="droparea" @dragover.prevent @drop="onDrop">
    <label v-if="!image">D＆D
      <input type="file" name="image" @change="onChange">
    </label>
    <div v-else :class="{ 'image': true }">
      <img :src="image" />
      <button @click="removeFile">REMOVE</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: '',
    }
  },
  methods: {
    onDrop(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      const files = evt.dataTransfer.files;
      this.createFile(files[0]);
    },
    onChange(evt) {
      const files = evt.target.files;
      this.createFile(files[0]);
    },
    createFile(file) {
      if (!file.type.match('image.*')) {
        alert('Select an image');
        return;
      }
      const img = new Image();
      const reader = new FileReader();
      reader.onload = (evt) => {
        this.image = evt.target.result;
      }
      reader.readAsDataURL(file);
    },
    removeFile() {
      this.image = '';
    }
  }
}
</script>