<template>
  <Card class="dropZone" @dragover.prevent @drop.prevent @drop="selected" @click="$refs.fileInput.click()">
    <template #content>
      <div class="p-text-center">
        <i class="pi pi-upload"></i>
        <h2>{{ message }}</h2>
      </div>
      <input type="file" hidden="true" ref="fileInput" :disabled="disabled" @change="selected" />
    </template>
  </Card>
</template>

<script>
export default {
  emits: [
    'selected'
  ],
  props: [
    'message',
    'disabled'
  ],
  setup (props, context) {
    const selected = (event) => {
      const files = event.dataTransfer ? event.dataTransfer.files : event.target.files
      context.emit('selected', files)
    }

    return {
      selected
    }
  }
}
</script>

<style>
.dropZone {
  cursor: pointer;
}

i.pi.pi-upload {
  font-size: 5em
}
</style>
