69 lines
3.0 KiB
Vue
69 lines
3.0 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import FileUpload from 'primevue/fileupload';
|
|
import Badge from 'primevue/badge';
|
|
import { formatFileSize } from '../../../utils/fileUtils';
|
|
|
|
const files = defineModel({ type: Array, default: () => [] });
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const fileUpload = ref(null);
|
|
|
|
const openFileDialog = () => {
|
|
fileUpload.value.choose();
|
|
}
|
|
|
|
const onSelectedFiles = (event) => {
|
|
files.value = event.files;
|
|
}
|
|
|
|
const onRemoveFile = (removeFileCallback, index) => {
|
|
removeFileCallback(index);
|
|
files.value = fileUpload.value.files;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FileUpload
|
|
ref="fileUpload"
|
|
class="w-full !border-dashed !border-[#C1D0E8] !min-h-[100px] flex items-center justify-center"
|
|
name="files[]"
|
|
:customUpload="true"
|
|
:showUploadButton="false"
|
|
:showCancelButton="false"
|
|
:showChooseButton="false"
|
|
:multiple="true"
|
|
accept="image/*"
|
|
:maxFileSize="10485760"
|
|
@select="onSelectedFiles"
|
|
>
|
|
<template #content="{ files: selectedFiles, removeFileCallback }">
|
|
<div v-if="selectedFiles.length > 0" class="flex flex-wrap gap-4 pt-4">
|
|
<div v-for="(file, index) of selectedFiles" :key="file.name + file.type + file.size" class="relative w-[5rem] h-[5rem] rounded-lg border border-gray-200 flex flex-col items-center overflow-hidden">
|
|
<img role="presentation" :alt="file.name" :src="file.objectURL" class="absolute top-0 left-0 w-full h-full object-cover"/>
|
|
<div class="absolute bottom-0 left-0 w-full flex flex-col items-center gap-1 bg-white/80 p-1">
|
|
<span class="w-full text-[10px] font-[400] text-center text-ellipsis whitespace-nowrap overflow-hidden">{{ file.name }}</span>
|
|
<span class="text-[9px]">{{ formatFileSize(file.size) }}</span>
|
|
</div>
|
|
<button type="button" class="absolute top-1 left-1 w-4 h-4 flex items-center justify-center rounded-full bg-white text-[#7A1419] text-[10px] cursor-pointer" @click.stop="onRemoveFile(removeFileCallback, index)">✕</button>
|
|
</div>
|
|
<button type="button" class="w-[5rem] h-[5rem] rounded-lg border border-dashed border-[#C1D0E8] text-[11px] text-[#365891] cursor-pointer" @click="openFileDialog">افزودن</button>
|
|
</div>
|
|
</template>
|
|
<template #empty>
|
|
<div class="w-full flex items-center justify-center flex-col cursor-pointer" @click="openFileDialog">
|
|
<p class="text-[11px] font-[600] text-[#365891]">{{ title }}</p>
|
|
<p class="mt-1 mb-0 text-[11px] font-[400] text-[#365891]">
|
|
جهت آپلود تصویر کلیک کنید و یا فایل خود را کشیده و در این قسمت رها (Drag and Drop) کنید.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</FileUpload>
|
|
</template>
|