OpenGeodeWeb-Front/app/components/FileUploader.vue at 461f15aca21ffda0bd3187a69de7432cecd1378a · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<script setup>
  import DragAndDrop from "@ogw_front/components/DragAndDrop"
  import { useGeodeStore } from "@ogw_front/stores/geode"

  const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"])

  const { multiple, accept, files, auto_upload, mini } = defineProps({
    multiple: { type: Boolean, required: true },
    accept: { type: String, required: true },
    files: { type: Array, required: false, default: [] },
    auto_upload: { type: Boolean, required: false, default: false },
    mini: { type: Boolean, required: false, default: false },
  })

  const geodeStore = useGeodeStore()

  const internal_files = ref(files)
  const loading = ref(false)
  const files_uploaded = ref(false)

  const toggle_loading = useToggle(loading)

  function processSelectedFiles(files) {
    if (multiple) {
      internal_files.value = [...internal_files.value, ...files]
    } else {
      internal_files.value = [files[0]]
    }
  }

  function removeFile(index) {
    internal_files.value.splice(index, 1)
    if (internal_files.value.length === 0) {
      files_uploaded.value = false
      emit("files_uploaded", [])
    }
  }

  async function upload_files() {
    toggle_loading()
    const promise_array = internal_files.value.map((file) =>
      geodeStore.upload(file),
    )
    await Promise.all(promise_array)
    files_uploaded.value = true
    emit("files_uploaded", internal_files.value)

    toggle_loading()
  }

  if (files.length > 0) {
    internal_files.value = files
    if (auto_upload) {
      upload_files()
    }
  }

  watch(
    () => files,
    (newVal) => {
      internal_files.value = newVal
    },
    { deep: true },
  )

  watch(internal_files, (value) => {
    files_uploaded.value = false
    if (auto_upload && value.length > 0) {
      upload_files()
    }
  })
</script>

<template>
  <DragAndDrop
    :multiple="multiple"
    :accept="accept"
    :loading="loading"
    :show-extensions="false"
    @files-selected="processSelectedFiles"
  />

  <v-card-text v-if="internal_files.length" class="mt-6">
    <v-sheet class="d-flex align-center mb-4" color="transparent">
      <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
      <span class="text-subtitle-1 font-weight-bold text-white">
        Selected Files
      </span>
      <v-chip
        size="small"
        class="ml-3 bg-white-opacity-10"
        color="white"
        variant="flat"
      >
        {{ internal_files.length }}
      </v-chip>
    </v-sheet>

    <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
      <v-chip
        v-for="(file, index) in internal_files"
        :key="index"
        closable
        size="default"
        color="white"
        variant="outlined"
        class="font-weight-medium glass-ui border-opacity-10 px-4"
        style="background: rgba(255, 255, 255, 0.05) !important"
        @click:close="removeFile(index)"
      >
        <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
        <span class="text-white">{{ file.name }}</span>
        <template #close>
          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
            >mdi-close-circle</v-icon
          >
        </template>
      </v-chip>
    </v-sheet>
  </v-card-text>

  <v-card-actions
    v-if="!auto_upload && internal_files.length"
    class="mt-6 pa-0"
  >
    <v-btn
      color="primary"
      variant="flat"
      size="large"
      rounded="xl"
      :loading="loading"
      class="text-none px-6 font-weight-bold custom-upload-btn"
      block
      @click="upload_files"
    >
      <v-icon start size="22">mdi-cloud-upload</v-icon>
      Upload {{ internal_files.length }} file<span
        v-if="internal_files.length > 1"
        >s</span
      >
    </v-btn>
  </v-card-actions>
</template>