🐛 fix: bugs fixed

src/components/file/VFileUpload.vue

@@ -15,7 +15,11 @@ import styles from '@visua/typography.module.css';
 
 const fileUploadRef = ref();
 const fileProgressMap = ref<Record<string, number>>({});
-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"
           />
           <span
-            v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0) && !hasActiveError"
+            v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0) && !(hasSystemError || hasValidationError)"
             :class="[styles['text-body-SM-detail-text-Regular']]"
           >
             Aucun fichier sélectionné
           </span>
         </div>
       </template>
-      <template #empty v-if="props.advanced && !hasActiveError">
+      <template #empty v-if="props.advanced && !(hasSystemError || hasValidationError)">
         <div class="fileupload-empty" :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 && !hasActiveError" style="margin-top: 0.75rem;" class="file-content">
+        <div v-if="props.advanced && !(hasValidationError || hasSystemError)" style="margin-top: 0.75rem;" class="file-content">
           <VMessage
             v-if="globalStatusMessage"
             :type="globalStatusMessage.type"
@@ -271,7 +283,7 @@ const globalStatusMessage = computed<{
             </div>
           </VScrollPanel>
         </div>
-        <div v-if="!props.advanced && !hasActiveError">
+        <div v-if="!props.advanced && !(hasValidationError || hasSystemError)">
           <VFile
             v-if="lastSelectedFile"
             :file="lastSelectedFile"
@@ -289,15 +301,18 @@ const globalStatusMessage = computed<{
           role="alert"
           aria-live="polite"
         >
-          <VHint
-            v-for="message of slotProps.messages"
-            :key="message"
-            :title="message"
-            type="alert"
-            icon
-          />
+        <VHint
+          v-for="message of [...(slotProps.messages ?? []), ...(hasSystemError ? [systemErrorMessage] : [])]"
+          :key="message"
+          :title="message"
+          type="alert"
+          icon
+        />
         </div>
-        <VLabelErrorProxy :hasError="(slotProps.messages ?? []).length > 0" @update:error="hasActiveError = $event" />
+        <VLabelErrorProxy
+          :hasError="(slotProps.messages ?? []).length > 0"
+          @update:error="hasValidationError = $event"
+        />
       </template>
     </FileUpload>
   </div>