Vue 3 Drag & Drop Overlay

DragDropOverlay.vue

<template>
  <div
    class="file-drop overlay"
    @dragover="handleDrag"
    @dragleave="toggleFileDrop"
    @drop="handleDrop"
  ></div>
  <div class="file-drop-text">
    <h1>Upload File</h1>
    <i-feather-upload />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'FileDrop',
    props: {
      toggleFileDrop: {
        type: Function,
        required: true,
      },
    },
    setup(props) {
      const methods = {
        handleDrop(e: DragEvent) {
          e.preventDefault()
          e.stopPropagation()
          props.toggleFileDrop()
          if (e.dataTransfer)
            Array.from(e.dataTransfer.files).forEach((file: File) => {
              uploadFile(file, file.type)
            })
        },
        handleDrag(e: DragEvent) {
          e.preventDefault()
          e.stopPropagation()
        },
      }
      return {
        ...methods,
      }
    },
  })
</script>

<style scoped lang="scss">
  .file-drop {
    background-color: #0b9494;
  }

  .file-drop-text {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    pointer-events: none;

    h1 {
      font-size: 6vmin;
      margin-right: 16px;
    }

    .icon {
      height: 42px;
      width: 42px;
    }
  }

  .file-drop-input {
    display: none;
  }
</style>