79 lines
2.9 KiB
Vue
79 lines
2.9 KiB
Vue
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: Boolean,
|
||
|
|
files: Array,
|
||
|
|
fileError: String,
|
||
|
|
activeModelColor: String,
|
||
|
|
});
|
||
|
|
const emit = defineEmits(["update:modelValue", "triggerInput", "remove", "done"]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<VDialog :model-value="modelValue" max-width="500" @update:modelValue="emit('update:modelValue', $event)">
|
||
|
|
<VCard>
|
||
|
|
<VCardTitle class="pb-2 pt-4">
|
||
|
|
<span class="text-h5">Upload Files</span>
|
||
|
|
</VCardTitle>
|
||
|
|
|
||
|
|
<VCardText>
|
||
|
|
<div class="text-subtitle-2 mb-4">
|
||
|
|
Select files to upload (Max 5 files, 5MB each)
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="upload-area pa-6 border-dashed rounded d-flex flex-column align-center justify-center"
|
||
|
|
@click="emit('triggerInput')"
|
||
|
|
@dragover.prevent
|
||
|
|
@drop.prevent="$event => emit('triggerInput', $event)"
|
||
|
|
>
|
||
|
|
<VIcon :icon="'tabler-upload'" :size="36" :color="activeModelColor" class="mb-3" />
|
||
|
|
<div class="text-body-1 mb-1">Drag files here or click to upload</div>
|
||
|
|
<div class="text-caption text-grey">Supported formats: Images, PDF, DOC, DOCX, TXT</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="fileError" class="text-error mt-2">{{ fileError }}</div>
|
||
|
|
|
||
|
|
<div v-if="files.length > 0">
|
||
|
|
<div class="text-subtitle-2 mt-4 mb-2">Selected files:</div>
|
||
|
|
<VList density="compact" class="bg-grey-lighten-5 rounded">
|
||
|
|
<VListItem v-for="(file, index) in files" :key="index">
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<VIcon :icon="file.type.startsWith('image/') ? 'tabler-photo' : file.type.includes('pdf') ? 'tabler-file-type-pdf' : file.type.includes('word') ? 'tabler-file-type-doc' : file.type.includes('text') ? 'tabler-file-text' : 'tabler-file'" />
|
||
|
|
</template>
|
||
|
|
<VListItemTitle>{{ file.name }}</VListItemTitle>
|
||
|
|
<VListItemSubtitle>{{ (file.size / (1024 * 1024)).toFixed(1) }} MB</VListItemSubtitle>
|
||
|
|
<template v-slot:append>
|
||
|
|
<VBtn icon size="small" variant="text" @click="emit('remove', index)">
|
||
|
|
<VIcon icon="tabler-x" />
|
||
|
|
</VBtn>
|
||
|
|
</template>
|
||
|
|
</VListItem>
|
||
|
|
</VList>
|
||
|
|
</div>
|
||
|
|
</VCardText>
|
||
|
|
|
||
|
|
<VCardActions class="pb-4 px-4">
|
||
|
|
<VSpacer></VSpacer>
|
||
|
|
<VBtn color="grey-darken-1" variant="text" @click="emit('update:modelValue', false)">Cancel</VBtn>
|
||
|
|
<VBtn :color="activeModelColor" variant="tonal" @click="emit('done')" :disabled="files.length === 0">Done</VBtn>
|
||
|
|
</VCardActions>
|
||
|
|
</VCard>
|
||
|
|
</VDialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.border-dashed {
|
||
|
|
border: 2px dashed rgba(var(--v-theme-on-surface), 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-area {
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-area:hover {
|
||
|
|
background-color: rgba(var(--v-theme-on-surface), 0.05);
|
||
|
|
border-color: rgba(var(--v-theme-on-surface), 0.4);
|
||
|
|
}
|
||
|
|
</style>
|