Modrinth/components/ui/DropArea.vue

<template>
  <div
    ref="drop_area"
    class="drop-area"
    @drop.stop.prevent="
      (event) => {
        $refs.drop_area.style.visibility = 'hidden'

        if (event.dataTransfer && event.dataTransfer.files && fileAllowed) {
          $emit('change', event.dataTransfer.files)
        }
      }
    "
    @dragenter.prevent="allowDrag"
    @dragover.prevent="allowDrag"
    @dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
  />
</template>

<script>
export default {
  props: {
    accept: {
      type: String,
      default: '',
    },
  },
  emits: ['change'],
  data() {
    return {
      fileAllowed: false,
    }
  },
  mounted() {
    document.addEventListener('dragenter', this.allowDrag)
  },
  methods: {
    allowDrag(event) {
      const file = event.dataTransfer?.items[0]

      if (
        file &&
        this.accept
          .split(',')
          .reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === '*', false)
      ) {
        this.fileAllowed = true
        event.dataTransfer.dropEffect = 'copy'
        event.preventDefault()

        if (this.$refs.drop_area) {
          this.$refs.drop_area.style.visibility = 'visible'
        }
      } else {
        this.fileAllowed = false

        if (this.$refs.drop_area) {
          this.$refs.drop_area.style.visibility = 'hidden'
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.drop-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  visibility: hidden;
  background-color: hsla(0, 0%, 0%, 0.5);
  transition: visibility 0.2s ease-in-out, background-color 0.1s ease-in-out;
  display: flex;

  &::before {
    --indent: 4rem;

    content: ' ';
    position: relative;
    top: var(--indent);
    left: var(--indent);
    width: calc(100% - (2 * var(--indent)));
    height: calc(100% - (2 * var(--indent)));
    border-radius: 1rem;
    border: 0.25rem dashed var(--color-button-bg);
  }
}
</style>