🐛 fix: File component updated

src/components/file/VFile.vue

@@ -69,22 +69,22 @@ const onRemoveTemplatingFile = (file: File, removeFileCallback: (index: number)
 };
 
 const getFileIconClass = (file: File) => {
-  const type = file.name.toLowerCase();
+  const type = file?.name.toLowerCase();
-  if (type.endsWith('.pdf')) return 'ri-file-pdf-2-line';
+  if (type?.endsWith('.pdf')) return 'ri-file-pdf-2-line';
-  if (type.endsWith('.doc') || type.endsWith('.docx')) return 'ri-file-word-2-line';
+  if (type?.endsWith('.doc') || type?.endsWith('.docx')) return 'ri-file-word-2-line';
-  if (type.endsWith('.xls') || type.endsWith('.xlsx')) return 'ri-file-excel-2-line';
+  if (type?.endsWith('.xls') || type?.endsWith('.xlsx')) return 'ri-file-excel-2-line';
-  if (type.endsWith('.txt')) return 'ri-file-text-line';
+  if (type?.endsWith('.txt')) return 'ri-file-text-line';
-  if (type.endsWith('.zip') || type.endsWith('.rar')) return 'ri-file-zip-line';
+  if (type?.endsWith('.zip') || type?.endsWith('.rar')) return 'ri-file-zip-line';
   return 'ri-file-line'; // icône générique
 };
 
 const getFileIconColor = (file: File) => {
-  const type = file.name.toLowerCase();
+  const type = file?.name.toLowerCase();
-  if (type.endsWith('.pdf')) return 'var(--border-plain-error)'; // rouge
+  if (type?.endsWith('.pdf')) return 'var(--border-plain-error)'; // rouge
-  if (type.endsWith('.doc') || type.endsWith('.docx')) return 'var(--border-plain-blue-france)'; // bleu
+  if (type?.endsWith('.doc') || type?.endsWith('.docx')) return 'var(--border-plain-blue-france)'; // bleu
-  if (type.endsWith('.xls') || type.endsWith('.xlsx')) return 'var(--border-plain-success)'; // vert
+  if (type?.endsWith('.xls') || type?.endsWith('.xlsx')) return 'var(--border-plain-success)'; // vert
-  if (type.endsWith('.txt')) return 'var(--border-plain-grey)'; // gris
+  if (type?.endsWith('.txt')) return 'var(--border-plain-grey)'; // gris
-  if (type.endsWith('.zip') || type.endsWith('.rar')) return 'var(--illustration-color-850-tournesol-default)'; // jaune
+  if (type?.endsWith('.zip') || type?.endsWith('.rar')) return 'var(--illustration-color-850-tournesol-default)'; // jaune
   return 'var(--border-plain-blue-france)'; // bleu marine
 };
 
@@ -109,24 +109,37 @@ const getImagePreview = (file: File) => {
     class="advanced-file"
     :title="`Fichier : ${props.file.name}`"
     :style="{border: borderColor}"
+    :class="[styles['text-body-XS-mention-text-Medium']]"
   >
+    <VButton
+      tertiary
+      noOutline
+      size="sm"
+      icon="ri-close-line"
+      @click="onRemoveTemplatingFile(props.file, props.removeFileCallback, props.index)"
+      title='Spprimer le fichier'
+      ref="clearfile"
+      aria-controls="clear-file"
+      type="button"
+      class="button"
+    />
     <div>
       <img
-        v-if="file.type.startsWith('image/')"
+        v-if="file?.type.startsWith('image/')"
         role="presentation"
-        :alt="props.file.name"
+        :alt="props.file?.name"
         :src="getImagePreview(props.file)"
       />
       <i
         v-else
         :class="getFileIconClass(props.file)"
-        :style="{color: getFileIconColor(props.file), fontSize: '6.25rem'}"
+        :style="{color: getFileIconColor(props.file), fontSize: '4rem', fontWeight: 500}"
       />
     </div>
-    <span :title="props.file.name" class="file-name">
+    <span :title="props.file?.name" class="file-name">
-      {{ props.file.name }}
+      {{ props.file?.name }}
     </span>
-    <div>{{ formatSize(props.file.size) }}</div>
+    <span>{{ formatSize(props.file?.size ?? 0) }}</span>
     <VBadge
       v-if="advanced"
       :label="badgeLabel"
@@ -138,25 +151,14 @@ const getImagePreview = (file: File) => {
       v-if="advanced && status === 'pending'"
       :value="props.progress"
       :show-value="false"
-      style="width: 100%; margin-top: 0.5rem;"
+      style="width: 6rem; margin-top: 0.5rem;"
-    />
-    <VButton
-      tertiary
-      noOutline
-      size="sm"
-      icon="ri-close-line"
-      @click="onRemoveTemplatingFile(props.file, props.removeFileCallback, props.index)"
-      title='Spprimer le fichier'
-      ref="clearfile"
-      aria-controls="clear-file"
-      type="button"
     />
   </div>
   <!-- Simple file -->
   <div v-else class="simple-file" >
     <div>
       <img
-        v-if="file.type.startsWith('image/')"
+        v-if="file?.type.startsWith('image/')"
         role="presentation"
         :alt="props.file.name"
         :src="getImagePreview(props.file)"
@@ -168,9 +170,15 @@ const getImagePreview = (file: File) => {
       />
     </div>
     <div class="file-info" :class="[styles['text-body-SM-detail-text-Regular']]">
-      <span>{{ props.file.name }}</span>
+      <span>{{ props.file?.name }}</span>
-      <span>{{ formatSize(props.file.size) }}</span>
+      <span>{{ formatSize(props.file?.size ?? 0) }}</span>
     </div>
+    <VBadge
+      :label="badgeLabel"
+      :type="badgeType"
+      small
+      no-icon
+    />
   </div>
 </template>
 
@@ -180,6 +188,11 @@ img{
   height: auto;
 }
 
+.button{
+  display: flex;
+  align-self: self-end;
+}
+
 .advanced-file{
   border-radius: 3px;
   width: fit-content;
@@ -187,6 +200,7 @@ img{
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  padding-bottom: 0.25rem;
 }
 
 .simple-file{
@@ -197,10 +211,12 @@ img{
 }
 
 .file-name{
-  max-width: 7.5rem;
+  width: 6rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin: 0rem 0.5rem;
+  text-align: center;
 }
 
 .file-info{