@adminforth/upload 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom/uploader.vue +15 -2
- package/dist/custom/uploader.vue +15 -2
- package/package.json +1 -1
package/custom/uploader.vue
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="flex items-center justify-center w-full">
|
|
3
|
-
<label for="dropzone-file"
|
|
3
|
+
<label for="dropzone-file"
|
|
4
|
+
class="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 hover:bg-gray-100 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
|
5
|
+
@dragover.prevent="() => dragging = true"
|
|
6
|
+
@dragleave.prevent="() => dragging = false"
|
|
7
|
+
@drop.prevent="onFileChange"
|
|
8
|
+
:class="{
|
|
9
|
+
'border-blue-600 dark:border-blue-400': dragging,
|
|
10
|
+
'border-gray-300 dark:border-gray-600': !dragging,
|
|
11
|
+
'bg-blue-50 dark:bg-blue-800': dragging,
|
|
12
|
+
'bg-gray-50 dark:bg-gray-800': !dragging,
|
|
13
|
+
}"
|
|
14
|
+
>
|
|
4
15
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
5
16
|
<img v-if="imgPreview" :src="imgPreview" class="w-100 mt-4 rounded-lg h-40 object-contain" />
|
|
6
17
|
|
|
@@ -59,6 +70,8 @@ const emit = defineEmits([
|
|
|
59
70
|
'update:emptiness',
|
|
60
71
|
]);
|
|
61
72
|
|
|
73
|
+
const dragging = ref(false);
|
|
74
|
+
|
|
62
75
|
const imgPreview = ref(null);
|
|
63
76
|
const progress = ref(0);
|
|
64
77
|
|
|
@@ -117,7 +130,7 @@ const onFileChange = async (e) => {
|
|
|
117
130
|
progress.value = 0;
|
|
118
131
|
uploaded.value = false;
|
|
119
132
|
|
|
120
|
-
const file = e.target.files[0]
|
|
133
|
+
const file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
|
|
121
134
|
|
|
122
135
|
// get filename, extension, size, mimeType
|
|
123
136
|
const { name, size, type } = file;
|
package/dist/custom/uploader.vue
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="flex items-center justify-center w-full">
|
|
3
|
-
<label for="dropzone-file"
|
|
3
|
+
<label for="dropzone-file"
|
|
4
|
+
class="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 hover:bg-gray-100 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
|
5
|
+
@dragover.prevent="() => dragging = true"
|
|
6
|
+
@dragleave.prevent="() => dragging = false"
|
|
7
|
+
@drop.prevent="onFileChange"
|
|
8
|
+
:class="{
|
|
9
|
+
'border-blue-600 dark:border-blue-400': dragging,
|
|
10
|
+
'border-gray-300 dark:border-gray-600': !dragging,
|
|
11
|
+
'bg-blue-50 dark:bg-blue-800': dragging,
|
|
12
|
+
'bg-gray-50 dark:bg-gray-800': !dragging,
|
|
13
|
+
}"
|
|
14
|
+
>
|
|
4
15
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
5
16
|
<img v-if="imgPreview" :src="imgPreview" class="w-100 mt-4 rounded-lg h-40 object-contain" />
|
|
6
17
|
|
|
@@ -59,6 +70,8 @@ const emit = defineEmits([
|
|
|
59
70
|
'update:emptiness',
|
|
60
71
|
]);
|
|
61
72
|
|
|
73
|
+
const dragging = ref(false);
|
|
74
|
+
|
|
62
75
|
const imgPreview = ref(null);
|
|
63
76
|
const progress = ref(0);
|
|
64
77
|
|
|
@@ -117,7 +130,7 @@ const onFileChange = async (e) => {
|
|
|
117
130
|
progress.value = 0;
|
|
118
131
|
uploaded.value = false;
|
|
119
132
|
|
|
120
|
-
const file = e.target.files[0]
|
|
133
|
+
const file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
|
|
121
134
|
|
|
122
135
|
// get filename, extension, size, mimeType
|
|
123
136
|
const { name, size, type } = file;
|