AstralRinth/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue

<template>
  <div
    @dragenter.prevent="handleDragEnter"
    @dragover.prevent="handleDragOver"
    @dragleave.prevent="handleDragLeave"
    @drop.prevent="handleDrop"
  >
    <slot />
    <div
      v-if="isDragging"
      :class="[
        'absolute inset-0 flex items-center justify-center rounded-2xl bg-black bg-opacity-50 text-white',
        overlayClass,
      ]"
    >
      <div class="text-center">
        <UploadIcon class="mx-auto h-16 w-16" />
        <p class="mt-2 text-xl">
          Drop {{ type ? type.toLocaleLowerCase() : "file" }}s here to upload
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UploadIcon } from "@modrinth/assets";
import { ref } from "vue";

const emit = defineEmits<{
  (event: "filesDropped", files: File[]): void;
}>();

defineProps<{
  overlayClass?: string;
  type?: string;
}>();

const isDragging = ref(false);
const dragCounter = ref(0);

const handleDragEnter = (event: DragEvent) => {
  event.preventDefault();
  if (!event.dataTransfer?.types.includes("application/pyro-file-move")) {
    dragCounter.value++;
    isDragging.value = true;
  }
};

const handleDragOver = (event: DragEvent) => {
  event.preventDefault();
};

const handleDragLeave = (event: DragEvent) => {
  event.preventDefault();
  dragCounter.value--;
  if (dragCounter.value === 0) {
    isDragging.value = false;
  }
};

const handleDrop = (event: DragEvent) => {
  event.preventDefault();
  isDragging.value = false;
  dragCounter.value = 0;

  const isInternalMove = event.dataTransfer?.types.includes("application/pyro-file-move");
  if (isInternalMove) return;

  const files = event.dataTransfer?.files;
  if (files) {
    emit("filesDropped", Array.from(files));
  }
};
</script>