diff --git a/src/components/file/VFileUpload.vue b/src/components/file/VFileUpload.vue index 35d9c6f..96199a5 100644 --- a/src/components/file/VFileUpload.vue +++ b/src/components/file/VFileUpload.vue @@ -15,7 +15,11 @@ import styles from '@visua/typography.module.css'; const fileUploadRef = ref(); const fileProgressMap = ref>({}); -const hasActiveError = ref(false); +const hasValidationError = ref(false); +const hasSystemError = ref(false); +const systemErrorMessage = ref(''); + + defineOptions({ inheritAttrs: false, @@ -72,7 +76,6 @@ const handleSelect = (event: FileUploadSelectEvent) => { const handleClear = () => { emit('clear'); - hasActiveError.value = false; }; const handleUpload = (event: FileUploadUploadEvent) => { @@ -81,7 +84,6 @@ const handleUpload = (event: FileUploadUploadEvent) => { const handleRemove = (event: FileUploadRemoveEvent) => { emit('remove', event); - hasActiveError.value =false; }; const handleProgress = (event: FileUploadProgressEvent) => { @@ -95,11 +97,21 @@ const handleProgress = (event: FileUploadProgressEvent) => { const handleError = (event: FileUploadErrorEvent) => { emit('error', event); - hasActiveError.value = true; + hasSystemError.value = true; + + const status = event.xhr?.status; + const statusText = event.xhr?.statusText || 'Erreur inconnue'; + const fileNames = Array.isArray(event.files) + ? event.files.map(f => f.name).join(', ') + : event.files.name; + + systemErrorMessage.value = `Echec de téléversement du fichier ${fileNames} {Status : ${status} | Message : <${statusText}>}`; + if (!props.advanced && fileUploadRef.value) { fileUploadRef.value.uploadedFiles = []; } -} +}; + const lastSelectedFile = computed(() => { const files = fileUploadRef.value?.files || []; @@ -114,10 +126,10 @@ const padding = computed(() => props.advanced ? '1.125rem' : '0rem') const borderColor = computed(() => props.advanced ? 'var(--border-default-grey)' : 'transparent'); const labelState = computed(() => { - if(!hasActiveError.value && !props.disabled) return 'default'; - else if(hasActiveError.value && !props.disabled) return 'error'; - else return undefined -}) + if ((hasValidationError.value || hasSystemError.value) && !props.disabled) return 'error'; + return 'default'; +}); + type MessageType = 'alert' | 'warning' | 'success' | 'info'; @@ -222,21 +234,21 @@ const globalStatusMessage = computed<{ title="parcourir les fichiers" /> Aucun fichier sélectionné -