blob: b48d8c3bd0098a205921ef982c46fedb0d78849e (
plain) (
blame)
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
|
<script lang="ts" setup>
import _ from 'lodash';
const props = withDefaults(defineProps<{
multiple?: boolean
accept?: string
title?: string
}>(), {
multiple: false,
accept: undefined,
title: 'Drag and drop files here, or click to select files',
});
const emit = defineEmits<{
(event: 'filesUpload', files: File[]): void
(event: 'fileUpload', file: File): void
}>();
const { multiple } = toRefs(props);
const isOverDropZone = ref(false);
const fileInput = ref<HTMLInputElement | null>(null);
function triggerFileInput() {
fileInput.value?.click();
}
function handleFileInput(event: Event) {
const files = (event.target as HTMLInputElement).files;
handleUpload(files);
}
function handleDrop(event: DragEvent) {
event.preventDefault();
const files = event.dataTransfer?.files;
handleUpload(files);
}
function handleUpload(files: FileList | null | undefined) {
if (_.isNil(files) || _.isEmpty(files)) {
return;
}
if (multiple.value) {
emit('filesUpload', Array.from(files));
return;
}
emit('fileUpload', files[0]);
}
</script>
<template>
<div
class="flex flex-col cursor-pointer items-center justify-center border-2px border-gray-300 border-opacity-50 rounded-lg border-dashed p-8 transition-colors"
:class="{
'border-primary border-opacity-100': isOverDropZone,
}"
@click="triggerFileInput"
@drop.prevent="handleDrop"
@dragover.prevent
@dragenter="isOverDropZone = true"
@dragleave="isOverDropZone = false"
>
<input
ref="fileInput"
type="file"
class="hidden"
:multiple="multiple"
:accept="accept"
@change="handleFileInput"
>
<slot>
<span op-70>
{{ title }}
</span>
<!-- separator -->
<div my-4 w-full flex items-center justify-center op-70>
<div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" />
<div class="mx-2 text-gray-400">
or
</div>
<div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" />
</div>
<c-button>
Browse files
</c-button>
</slot>
</div>
</template>
|
