|
1 | 1 | <template> |
2 | 2 | <v-row> |
3 | 3 | <v-col class="pa-0"> |
4 | | - <v-file-input v-model="internal_files" :multiple="props.multiple" :label="label" :accept="props.accept" |
5 | | - :rules="[(value) => !!value || 'The file is mandatory']" color="primary" :hide-input="props.mini" |
6 | | - :hide-details="props.mini" chips counter show-size @click:clear="clear()" /> |
| 4 | + <v-file-input |
| 5 | + v-model="internal_files" |
| 6 | + :multiple="props.multiple" |
| 7 | + :label="label" |
| 8 | + :accept="props.accept" |
| 9 | + :rules="[(value) => !!value || 'The file is mandatory']" |
| 10 | + color="primary" |
| 11 | + :hide-input="props.mini" |
| 12 | + :hide-details="props.mini" |
| 13 | + chips |
| 14 | + counter |
| 15 | + show-size |
| 16 | + @click:clear="clear()" |
| 17 | + /> |
7 | 18 | </v-col> |
8 | 19 | </v-row> |
9 | 20 | <v-row v-if="!props.auto_upload"> |
10 | 21 | <v-col cols="auto"> |
11 | | - <v-btn color="primary" :disabled="!internal_files.length && !files_uploaded" :loading="loading" class="pa-2" |
12 | | - @click="upload_files"> |
| 22 | + <v-btn |
| 23 | + color="primary" |
| 24 | + :disabled="!internal_files.length && !files_uploaded" |
| 25 | + :loading="loading" |
| 26 | + class="pa-2" |
| 27 | + @click="upload_files" |
| 28 | + > |
13 | 29 | Upload file(s) |
14 | 30 | </v-btn> |
15 | 31 | </v-col> |
16 | 32 | </v-row> |
17 | 33 | </template> |
18 | 34 |
|
19 | 35 | <script setup> |
20 | | -import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json" |
21 | | -const schema = schemas.opengeodeweb_back.upload_file |
| 36 | + import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json" |
| 37 | + const schema = schemas.opengeodeweb_back.upload_file |
22 | 38 |
|
23 | | -const emit = defineEmits(["files_uploaded", "decrement_step"]) |
| 39 | + const emit = defineEmits(["files_uploaded", "decrement_step"]) |
24 | 40 |
|
25 | | -const props = defineProps({ |
26 | | - multiple: { type: Boolean, required: true }, |
27 | | - accept: { type: String, required: true }, |
28 | | - files: { type: Array, required: false, default: [] }, |
29 | | - auto_upload: { type: Boolean, required: false, default: false }, |
30 | | - mini: { type: Boolean, required: false, default: false }, |
31 | | -}) |
| 41 | + const props = defineProps({ |
| 42 | + multiple: { type: Boolean, required: true }, |
| 43 | + accept: { type: String, required: true }, |
| 44 | + files: { type: Array, required: false, default: [] }, |
| 45 | + auto_upload: { type: Boolean, required: false, default: false }, |
| 46 | + mini: { type: Boolean, required: false, default: false }, |
| 47 | + }) |
32 | 48 |
|
33 | | -const label = props.multiple |
34 | | - ? "Please select file(s) to import" |
35 | | - : "Please select a file to import" |
36 | | -const internal_files = ref(props.files) |
37 | | -const loading = ref(false) |
38 | | -const files_uploaded = ref(false) |
| 49 | + const label = props.multiple |
| 50 | + ? "Please select file(s) to import" |
| 51 | + : "Please select a file to import" |
| 52 | + const internal_files = ref(props.files) |
| 53 | + const loading = ref(false) |
| 54 | + const files_uploaded = ref(false) |
39 | 55 |
|
40 | | -const toggle_loading = useToggle(loading) |
| 56 | + const toggle_loading = useToggle(loading) |
41 | 57 |
|
42 | | -async function upload_files() { |
43 | | - toggle_loading() |
44 | | - var promise_array = [] |
45 | | - for (const file of internal_files.value) { |
46 | | - const promise = new Promise((resolve, reject) => { |
47 | | - upload_file( |
48 | | - { route: schema.$id, file }, |
49 | | - { |
50 | | - request_error_function: () => { |
51 | | - reject() |
| 58 | + async function upload_files() { |
| 59 | + toggle_loading() |
| 60 | + var promise_array = [] |
| 61 | + for (const file of internal_files.value) { |
| 62 | + const promise = new Promise((resolve, reject) => { |
| 63 | + upload_file( |
| 64 | + { route: schema.$id, file }, |
| 65 | + { |
| 66 | + request_error_function: () => { |
| 67 | + reject() |
| 68 | + }, |
| 69 | + response_function: () => { |
| 70 | + resolve() |
| 71 | + }, |
| 72 | + response_error_function: () => { |
| 73 | + reject() |
| 74 | + }, |
52 | 75 | }, |
53 | | - response_function: () => { |
54 | | - resolve() |
55 | | - }, |
56 | | - response_error_function: () => { |
57 | | - reject() |
58 | | - }, |
59 | | - }, |
60 | | - ) |
61 | | - }) |
62 | | - promise_array.push(promise) |
63 | | - } |
64 | | - await Promise.all(promise_array) |
65 | | - files_uploaded.value = true |
66 | | - emit("files_uploaded", internal_files.value) |
| 76 | + ) |
| 77 | + }) |
| 78 | + promise_array.push(promise) |
| 79 | + } |
| 80 | + await Promise.all(promise_array) |
| 81 | + files_uploaded.value = true |
| 82 | + emit("files_uploaded", internal_files.value) |
67 | 83 |
|
68 | | - toggle_loading() |
69 | | -} |
| 84 | + toggle_loading() |
| 85 | + } |
70 | 86 |
|
71 | | -if (props.files.length) { |
72 | | - internal_files.value = props.files |
73 | | - if (props.auto_upload) { |
74 | | - upload_files() |
| 87 | + if (props.files.length) { |
| 88 | + internal_files.value = props.files |
| 89 | + if (props.auto_upload) { |
| 90 | + upload_files() |
| 91 | + } |
75 | 92 | } |
76 | | -} |
77 | 93 |
|
78 | | -function clear() { |
79 | | - internal_files.value = [] |
80 | | - emit("files_uploaded", internal_files.value) |
81 | | -} |
| 94 | + function clear() { |
| 95 | + internal_files.value = [] |
| 96 | + emit("files_uploaded", internal_files.value) |
| 97 | + } |
82 | 98 |
|
83 | | -watch( |
84 | | - () => props.files, |
85 | | - (newVal) => { |
86 | | - internal_files.value = newVal |
87 | | - }, |
88 | | - { deep: true }, |
89 | | -) |
| 99 | + watch( |
| 100 | + () => props.files, |
| 101 | + (newVal) => { |
| 102 | + internal_files.value = newVal |
| 103 | + }, |
| 104 | + { deep: true }, |
| 105 | + ) |
90 | 106 |
|
91 | | -watch(internal_files, (value) => { |
92 | | - files_uploaded.value = false |
93 | | - if (props.auto_upload) { |
94 | | - if (props.multiple.value == false) { |
95 | | - internal_files.value = [value] |
| 107 | + watch(internal_files, (value) => { |
| 108 | + files_uploaded.value = false |
| 109 | + if (props.auto_upload) { |
| 110 | + if (props.multiple.value == false) { |
| 111 | + internal_files.value = [value] |
| 112 | + } |
| 113 | + upload_files() |
96 | 114 | } |
97 | | - upload_files() |
98 | | - } |
99 | | -}) |
| 115 | + }) |
100 | 116 | </script> |
101 | 117 |
|
102 | 118 | <style scoped> |
103 | | -.div.v-input__details { |
104 | | - display: none; |
105 | | -} |
| 119 | + .div.v-input__details { |
| 120 | + display: none; |
| 121 | + } |
106 | 122 | </style> |
0 commit comments