[vue.js] fileアップロード用のdrag&dropエリアを持つコンポーネントを作成する

Upload.vue

<template>
  <div
    class="drag-area"
    @dragover.prevent
    @drop.prevent="upload"
  >
    <input type="file" @change="upload" />
    <span>{{ areaMessage }}</span>
  </div>
</template>
<script>
export default {
  name: "Upload",
  props: {
    areaMessage: {
      type: String,
      default: "Upload File"
    }
  },
  methods: {
    upload(event) {
      const files = event.target.files || event.dataTransfer.files;
      this.$emit("upload", files);
    }
  }
};
</script>
<style lang="sass" scoped>
.drag-area
  width: 100%
  min-width: 200px
  height: 100%
  min-height: 200px
  border: 1px dotted rgba(0,0,0,0.1)
  border-radius: 8px
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  background-color: #F5F5F5

  input
    opacity: 0
</style>