🐛 fix: File upload component updated
This commit is contained in:
Paul Valerie GOMA
parent
0d925df378
commit
fc64beda13
|
|
@ -11,17 +11,16 @@ import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEve
|
|||
import { computed, useId, ref, onMounted } from 'vue';
|
||||
import styles from '@visua/typography.module.css';
|
||||
|
||||
const fileUploadRef = ref();
|
||||
const fileProgressMap = ref<Record<string, number>>({});
|
||||
const fileSelected = ref(false);
|
||||
const hasActiveError = ref(false);
|
||||
const lastSelectedFile = ref<File | null>(null);
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
const fileUploadRef = ref();
|
||||
const fileProgressMap = ref<Record<string, number>>({});
|
||||
|
||||
defineExpose({
|
||||
upload: () => fileUploadRef.value.upload()
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<IVFileUpload>(), {
|
||||
id: () => useId(),
|
||||
label: 'Ajouter un fichier',
|
||||
|
|
@ -43,7 +42,7 @@ const props = withDefaults(defineProps<IVFileUpload>(), {
|
|||
cancelLabel: 'Annuler',
|
||||
showCancelButton: true,
|
||||
showUploadButton: true,
|
||||
advanced: false,
|
||||
advanced: false
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
|
|
@ -58,22 +57,21 @@ const emit = defineEmits([
|
|||
'removeUploadFile',
|
||||
'uploader',
|
||||
]);
|
||||
const fileSelected = ref(false);
|
||||
const hasActiveError = ref(false);
|
||||
|
||||
const lastSelectedFile = ref<File | null>(null);
|
||||
defineExpose({
|
||||
upload: () => fileUploadRef.value.upload()
|
||||
});
|
||||
|
||||
const handleSelect = (event: FileUploadSelectEvent) => {
|
||||
emit('select', event);
|
||||
|
||||
if (!props.advanced && event.files.length > 0 && fileUploadRef.value) {
|
||||
fileUploadRef.value.clear();
|
||||
fileUploadRef.value.files.push(event.files[event.files.length - 1]);
|
||||
fileUploadRef.value.files = [event.files.at(-1)];
|
||||
lastSelectedFile.value = event.files.at(-1);
|
||||
|
||||
}
|
||||
fileSelected.value = true;
|
||||
};
|
||||
|
||||
|
||||
const handleClear = () => {
|
||||
emit('clear');
|
||||
fileSelected.value = false;
|
||||
|
|
@ -82,13 +80,9 @@ const handleClear = () => {
|
|||
};
|
||||
|
||||
const handleUpload = (event: FileUploadUploadEvent) => {
|
||||
totalSize.value = 0;
|
||||
totalSizePercent.value = 100;
|
||||
emit('upload', event);
|
||||
hasActiveError.value = false;
|
||||
};
|
||||
|
||||
|
||||
const handleRemove = (event: FileUploadRemoveEvent) => {
|
||||
emit('remove', event);
|
||||
fileSelected.value = false;
|
||||
|
|
@ -110,34 +104,19 @@ const handleError = (event: FileUploadErrorEvent) => {
|
|||
hasActiveError.value = true;
|
||||
}
|
||||
|
||||
const error = computed(() => hasActiveError.value);
|
||||
|
||||
|
||||
const isSimpleAndEmpty = computed(() => {
|
||||
return !props.advanced && !fileSelected.value;
|
||||
});
|
||||
const uploadEvent = (callback: () => void) => {
|
||||
callback();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const currentFiles = fileUploadRef.value?.files || [];
|
||||
fileSelected.value = currentFiles.length > 0;
|
||||
});
|
||||
|
||||
const totalSize = ref(0);
|
||||
const totalSizePercent = ref(0);
|
||||
|
||||
const uploadEvent = (callback: () => void) => {
|
||||
totalSizePercent.value = totalSize.value / 10;
|
||||
callback();
|
||||
fileUploadRef.value.upload();
|
||||
};
|
||||
|
||||
const padding = computed(() => props.advanced ? '1.125rem' : '0rem')
|
||||
const borderColor = computed(() => props.advanced ? 'var(--border-default-grey)' : 'transparent');
|
||||
|
||||
const getLastFileSelected = (files: File[]) => {
|
||||
const indexOfLastFileSelected = files.length - 1;
|
||||
return files[indexOfLastFileSelected];
|
||||
}
|
||||
const error = computed(() => hasActiveError.value);
|
||||
|
||||
const labelState = computed(() => {
|
||||
if(!error.value && !props.disabled) return 'default';
|
||||
|
|
@ -163,7 +142,6 @@ const globalStatusMessage = computed<{
|
|||
return null;
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -211,88 +189,101 @@ const globalStatusMessage = computed<{
|
|||
class="p-fileupload"
|
||||
>
|
||||
<template #header="slotProps">
|
||||
<div v-if="props.advanced" class="advanced-fileupload-header">
|
||||
<VButtonGroup
|
||||
:buttons="[
|
||||
{
|
||||
label: 'Parcourir...',
|
||||
onClick: slotProps.chooseCallback,
|
||||
title: 'parcourir les fichiers',
|
||||
},
|
||||
{
|
||||
label: 'Téléverser',
|
||||
icon: 'ri-upload-cloud-line',
|
||||
onClick: () => uploadEvent(slotProps.uploadCallback),
|
||||
secondary: true,
|
||||
disabled: !slotProps.files || slotProps.files.length === 0,
|
||||
title: 'televerser les fichiers'
|
||||
},
|
||||
{
|
||||
label: 'Supprimer',
|
||||
tertiary: true,
|
||||
onClick: slotProps.clearCallback,
|
||||
disabled: !slotProps.files || slotProps.files.length === 0,
|
||||
title: 'suprimer les fichiers'
|
||||
}
|
||||
]"
|
||||
size="sm"
|
||||
<VButtonGroup
|
||||
v-if="props.advanced"
|
||||
:buttons="[
|
||||
{
|
||||
label: 'Parcourir...',
|
||||
onClick: slotProps.chooseCallback,
|
||||
title: 'parcourir les fichiers',
|
||||
},
|
||||
{
|
||||
label: 'Téléverser',
|
||||
icon: 'ri-upload-cloud-line',
|
||||
onClick: () => uploadEvent(slotProps.uploadCallback),
|
||||
secondary: true,
|
||||
disabled: !slotProps.files || slotProps.files.length === 0,
|
||||
title: 'televerser les fichiers'
|
||||
},
|
||||
{
|
||||
label: 'Supprimer',
|
||||
tertiary: true,
|
||||
onClick: slotProps.clearCallback,
|
||||
disabled: !slotProps.files || slotProps.files.length === 0,
|
||||
title: 'suprimer les fichiers'
|
||||
}
|
||||
]"
|
||||
size="sm"
|
||||
:disabled="props.disabled"
|
||||
inlineLayoutWhen="always"
|
||||
title="boutons de gestion des fichiers"
|
||||
/>
|
||||
<div v-else class="simple">
|
||||
<VButton
|
||||
label="Parcourir..."
|
||||
:disabled="props.disabled"
|
||||
inlineLayoutWhen="always"
|
||||
title="boutons de gestion des fichiers"
|
||||
size="sm"
|
||||
@click="slotProps.chooseCallback"
|
||||
title="parcourir les fichiers"
|
||||
/>
|
||||
<VMessage
|
||||
v-if="globalStatusMessage"
|
||||
:type="globalStatusMessage.type"
|
||||
:title="globalStatusMessage.title"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="simple-fileupload-header">
|
||||
<VButton label="Parcourir..." :disabled="props.disabled" size="sm" @click="slotProps.chooseCallback" title="parcourir les fichiers"/>
|
||||
<span
|
||||
v-if="isSimpleAndEmpty"
|
||||
v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0)"
|
||||
:class="[styles['text-body-SM-detail-text-Regular']]"
|
||||
>
|
||||
Aucun fichier sélectionné
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="slotProps" v-if="!isSimpleAndEmpty">
|
||||
<div v-if="props.advanced" class="advanced-container-content">
|
||||
<div class="fileupload-content">
|
||||
<div v-if="slotProps.files.length > 0">
|
||||
<div class="file-area">
|
||||
<VFile
|
||||
v-for="(file, index) in slotProps.files"
|
||||
:key="file.name + file.type + file.size"
|
||||
:file="file"
|
||||
:index="index"
|
||||
:remove-file-callback="slotProps.removeFileCallback"
|
||||
:progress="fileProgressMap[file.name] || 0"
|
||||
status="pending"
|
||||
advanced
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="slotProps.uploadedFiles.length > 0" class="fileupload-content">
|
||||
<div class="file-area">
|
||||
<VFile
|
||||
v-for="(file, index) in slotProps.uploadedFiles"
|
||||
:key="file.name + file.type + file.size"
|
||||
:file="file"
|
||||
:index="index"
|
||||
:remove-file-callback="slotProps.removeFileCallback"
|
||||
:progress="100"
|
||||
status="completed"
|
||||
advanced
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template #empty>
|
||||
<div class="fileupload-empty" v-if="props.advanced" :class="[styles['text-body-SM-detail-text-Regular']]">
|
||||
<i class="ri-upload-cloud-line upload-cloud-icon"></i>
|
||||
<p>Glissez-déposez les fichiers ici pour les téléverser.</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="slotProps">
|
||||
<div v-if="props.advanced" style="margin-top: 0.5rem;">
|
||||
<VMessage
|
||||
v-if="globalStatusMessage"
|
||||
:type="globalStatusMessage.type"
|
||||
:title="globalStatusMessage.title"
|
||||
/>
|
||||
<div v-if="slotProps.files.length > 0" class="file-area">
|
||||
<VFile
|
||||
v-for="(file, index) in slotProps.files"
|
||||
:key="file.name + file.type + file.size"
|
||||
:file="file"
|
||||
:index="index"
|
||||
:remove-file-callback="slotProps.removeFileCallback"
|
||||
:progress="fileProgressMap[file.name] || 0"
|
||||
status="pending"
|
||||
advanced
|
||||
/>
|
||||
</div>
|
||||
<div v-if="slotProps.uploadedFiles.length > 0" class="file-area">
|
||||
<VFile
|
||||
v-for="(file, index) in slotProps.uploadedFiles"
|
||||
:key="file.name + file.type + file.size"
|
||||
:file="file"
|
||||
:index="index"
|
||||
:remove-file-callback="slotProps.removeFileCallback"
|
||||
:progress="100"
|
||||
status="completed"
|
||||
advanced
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="slotProps.files.length > 0" class="simple-container-content">
|
||||
<div v-else>
|
||||
<VFile
|
||||
:file="getLastFileSelected(slotProps.files)"
|
||||
v-if="lastSelectedFile"
|
||||
:file="lastSelectedFile"
|
||||
:remove-file-callback="slotProps.removeFileCallback"
|
||||
status="pending"
|
||||
/>
|
||||
<VFile
|
||||
v-if="slotProps.uploadedFiles.length > 0 && slotProps.uploadedFiles.at(-1)"
|
||||
:file="slotProps.uploadedFiles.at(-1)!"
|
||||
:remove-file-callback="slotProps.removeFileCallback"
|
||||
status="completed"
|
||||
/>
|
||||
</div>
|
||||
<VHint
|
||||
|
|
@ -303,12 +294,6 @@ const globalStatusMessage = computed<{
|
|||
icon
|
||||
/>
|
||||
</template>
|
||||
<template #empty v-if="props.advanced">
|
||||
<div class="fileupload-empty" v-if="props.advanced">
|
||||
<i class="ri-upload-cloud-line upload-cloud-icon"></i>
|
||||
<p>Glissez-déposez les fichiers ici pour les téléverser.</p>
|
||||
</div>
|
||||
</template>
|
||||
</FileUpload>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -334,27 +319,19 @@ const globalStatusMessage = computed<{
|
|||
padding: v-bind(padding);
|
||||
}
|
||||
|
||||
.simple-fileupload-header{
|
||||
.simple{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--p-fileupload-basic-gap);
|
||||
align-items: baseline;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.advanced-fileupload-header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--p-fileupload-content-gap);
|
||||
margin-bottom: 0.75rem;
|
||||
align-items: center;
|
||||
gap: var(--p-fileupload-file-gap);
|
||||
}
|
||||
|
||||
.fileupload-empty{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.upload-cloud-icon{
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user