OpenGeodeWeb-Front/app/components/DragAndDrop.vue at c10cbae7151f69a2a00e9ecd0d2ed0be6034cfae · Geode-solutions/OpenGeodeWeb-Front · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<script setup>
  import GlassCard from "@ogw_front/components/GlassCard"

  const { multiple, accept, loading, showExtensions } = defineProps({
    multiple: { type: Boolean, default: false },
    accept: { type: String, default: "" },
    loading: { type: Boolean, default: false },
    showExtensions: { type: Boolean, default: true },
  })

  const emit = defineEmits(["files-selected"])

  const isDragging = ref(false)
  const fileInput = ref(undefined)

  function triggerFileDialog() {
    fileInput.value?.click()
  }

  function handleDrop(event) {
    isDragging.value = false
    const files = [...event.dataTransfer.files]
    emit("files-selected", files)
  }

  function handleFileSelect(event) {
    const files = [...event.target.files]
    emit("files-selected", files)
    event.target.value = ""
  }
</script>

<template>
  <v-hover v-slot="{ isHovering, props: hoverProps }">
    <GlassCard
      v-bind="hoverProps"
      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
      :class="{
        'elevation-4': isHovering || isDragging,
        'elevation-0': !(isHovering || isDragging),
      }"
      :style="{
        position: 'relative',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        background:
          isHovering || isDragging
            ? 'rgba(255, 255, 255, 0.08) !important'
            : 'rgba(255, 255, 255, 0.03) !important',
        transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
        pointerEvents: loading ? 'none' : 'auto',
        opacity: loading ? 0.6 : 1,
      }"
      variant="panel"
      padding="pa-0"
      @click="triggerFileDialog"
      @dragover.prevent="isDragging = true"
      @dragleave.prevent="isDragging = false"
      @drop.prevent="handleDrop"
    >
      <v-card-text class="pa-8">
        <v-sheet
          class="mx-auto mb-6 d-flex align-center justify-center"
          :color="
            isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'
          "
          rounded="circle"
          width="80"
          height="80"
          style="transition: all 0.3s ease"
        >
          <v-icon
            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
            size="40"
            :color="isHovering || isDragging ? 'primary' : 'white'"
            :class="{ rotating: loading }"
          />
        </v-sheet>

        <v-card-title
          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
          style="transition: color 0.3s ease"
        >
          {{
            loading
              ? "Uploading..."
              : isDragging
                ? "Drop to upload"
                : "Click or Drag & Drop files"
          }}
        </v-card-title>

        <v-card-subtitle v-if="showExtensions" class="text-body-2 pa-0">
          {{ accept ? `(${accept} files)` : "All files allowed" }}
        </v-card-subtitle>
      </v-card-text>

      <input
        ref="fileInput"
        type="file"
        class="d-none"
        :multiple="multiple"
        :accept="accept"
        @change="handleFileSelect"
      />
    </GlassCard>
  </v-hover>
</template>

<style scoped>
  .rotating {
    animation: rotate 1s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>