From db5d9b0dae95a3ccb421208c5ed625569fd72608 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Thu, 24 Jul 2025 03:32:49 +0200
Subject: [PATCH 01/26] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20FileUpload=20c?=
 =?UTF-8?q?omponent=20interface=20file=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/IVFileUpload.type.ts | 46 ++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/file/IVFileUpload.type.ts

diff --git a/src/components/file/IVFileUpload.type.ts b/src/components/file/IVFileUpload.type.ts
new file mode 100644
index 0000000..c38bc11
--- /dev/null
+++ b/src/components/file/IVFileUpload.type.ts
@@ -0,0 +1,46 @@
+/**
+ * Interface representing the properties of a FileUpload component.
+ */
+export default interface IFile {
+  /**
+   * Optional unique identifier for the file input.
+   */
+  id?: string;
+
+  /**
+   * Optional label displayed above or beside the file input.
+   */
+  label?: string;
+
+  /**
+   * Specifies the types of files that the input accepts.
+   * Can be a single MIME type string or an array of MIME types.
+   * Example: "image/*" or ["image/png", "application/pdf"]
+   */
+  accept?: string | string[];
+
+  /**
+   * Optional helper text displayed below the input to guide the user.
+   */
+  hint?: string;
+
+  /**
+   * Optional error message displayed when validation fails.
+   */
+  error?: string;
+
+  /**
+   * Optional message displayed when the input is valid.
+   */
+  validMessage?: string;
+
+  /**
+   * If true, disables the file input.
+   */
+  disabled?: boolean;
+
+  /**
+   * The current value of the file input, typically a file path or name.
+   */
+  modelValue?: string;
+}

From 4d07c97c7c09e305d2ef43a179c0b88c59edb595 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Thu, 24 Jul 2025 03:33:30 +0200
Subject: [PATCH 02/26] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index a92e270..305d47b 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -13,3 +13,4 @@
 @import './primevue-style/overlay.css';
 @import './primevue-style/iconfield.css';
 @import './primevue-style/progressbar.css';
+@import './primevue-style/fileupload.css';

From bf13fec2ebba5022e5153dfe642c6b96bfa049a2 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Thu, 24 Jul 2025 03:35:53 +0200
Subject: [PATCH 03/26] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20fileupload=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../style/primevue-style/fileupload.css       | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/assets/style/primevue-style/fileupload.css

diff --git a/src/assets/style/primevue-style/fileupload.css b/src/assets/style/primevue-style/fileupload.css
new file mode 100644
index 0000000..a3dba2a
--- /dev/null
+++ b/src/assets/style/primevue-style/fileupload.css
@@ -0,0 +1,24 @@
+:root {
+  --p-fileupload-basic-gap: 0.5rem;
+  --p-fileupload-progressbar-height: 0.25rem;
+  --p-fileupload-file-list-gap: 0.5rem;
+  --p-fileupload-file-padding: 1rem;
+  --p-fileupload-file-gap: 1rem;
+  --p-fileupload-file-border-color: var(--border-default-grey);
+  --p-fileupload-file-info-gap: 0.5rem;
+  --p-fileupload-content-highlight-border-color: var(--p-primary-color);
+  --p-fileupload-content-padding: 0rem;
+  --p-fileupload-content-gap: 1rem;
+  --p-fileupload-header-background: transparent;
+  --p-fileupload-header-color: var(--text-default-grey);
+  --p-fileupload-header-padding: 0rem;
+  --p-fileupload-header-border-color: unset;
+  --p-fileupload-header-border-width: 0;
+  --p-fileupload-header-border-radius: 0;
+  --p-fileupload-header-gap: 0.5rem;
+  --p-fileupload-background: var(--background-transparent);
+  --p-fileupload-border-color: var(--border-default-grey);
+  --p-fileupload-color: var(--text-default-grey);
+  --p-fileupload-border-radius: 0px;
+  --p-fileupload-transition-duration: var(--transition-duration);
+}

From abae860b58582d35c4237a8b9dc57f4af49bd988 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Thu, 24 Jul 2025 03:48:59 +0200
Subject: [PATCH 04/26] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20FileUpload=20c?=
 =?UTF-8?q?omponent=20interface=20file=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/IVFileUpload.type.ts | 154 ++++++++++++++++++++++-
 1 file changed, 153 insertions(+), 1 deletion(-)

diff --git a/src/components/file/IVFileUpload.type.ts b/src/components/file/IVFileUpload.type.ts
index c38bc11..707f95c 100644
--- a/src/components/file/IVFileUpload.type.ts
+++ b/src/components/file/IVFileUpload.type.ts
@@ -1,7 +1,9 @@
+import type { HintedString } from '@primevue/core';
+
 /**
  * Interface representing the properties of a FileUpload component.
  */
-export default interface IFile {
+export interface IFile {
   /**
    * Optional unique identifier for the file input.
    */
@@ -44,3 +46,153 @@ export default interface IFile {
    */
   modelValue?: string;
 }
+
+export interface FileUploadProps {
+  /**
+   * Name of the request parameter to identify the files at backend.
+   */
+  name?: string | undefined;
+  /**
+   * Remote url to upload the files.
+   */
+  url?: string | undefined;
+  /**
+   * Defines the UI of the component, possible values are 'advanced' and 'basic'.
+   * @defaultValue advanced
+   */
+  mode?: HintedString<'advanced' | 'basic'> | undefined;
+  /**
+   * Used to select multiple files at once from file dialog.
+   * @defaultValue false
+   */
+  multiple?: boolean | undefined;
+  /**
+   * Pattern to restrict the allowed file types such as 'image/*'.
+   */
+  accept?: string | undefined;
+  /**
+   * Disables the upload functionality.
+   * @defaultValue false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * When enabled, upload begins automatically after selection is completed.
+   * @defaultValue false
+   */
+  auto?: boolean | undefined;
+  /**
+   * Maximum file size allowed in bytes.
+   */
+  maxFileSize?: number | undefined;
+  /**
+   * Message of the invalid fize size.
+   * @defaultValue {0}: Invalid file size, file size should be smaller than {1.}
+   */
+  invalidFileSizeMessage?: string | undefined;
+  /**
+   * Message to display when number of files to be uploaded exceeeds the limit.
+   * @defaultValue Maximum number of files to be uploaded is {0.}
+   */
+  invalidFileLimitMessage?: string | undefined;
+  /**
+   * Message of the invalid fize type.
+   * @defaultValue '{0}: Invalid file type.'
+   */
+  invalidFileTypeMessage?: string | undefined;
+  /**
+   * Maximum number of files that can be uploaded.
+   */
+  fileLimit?: number | undefined;
+  /**
+   * Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
+   * @defaultValue false
+   */
+  withCredentials?: boolean | undefined;
+  /**
+   * Width of the image thumbnail in pixels.
+   * @defaultValue 50
+   */
+  previewWidth?: number | undefined;
+  /**
+   * Label of the choose button. Defaults to PrimeVue Locale configuration.
+   */
+  chooseLabel?: string | undefined;
+  /**
+   * Label of the upload button. Defaults to PrimeVue Locale configuration.
+   */
+  uploadLabel?: string | undefined;
+  /**
+   * Label of the cancel button. Defaults to PrimeVue Locale configuration.
+   * @defaultValue Cancel
+   */
+  cancelLabel?: string | undefined;
+  /**
+   * Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue Locale configuration.
+   */
+  customUpload?: boolean | undefined;
+  /**
+   * Whether to show the upload button.
+   * @defaultValue true
+   */
+  showUploadButton?: boolean | undefined;
+  /**
+   * Whether to show the cancel button.
+   * @defaultValue true
+   */
+  showCancelButton?: boolean | undefined;
+  /**
+   * Icon of the choose button.
+   */
+  chooseIcon?: string | undefined;
+  /**
+   * Icon of the upload button.
+   */
+  uploadIcon?: string | undefined;
+  /**
+   * Icon of the cancel button.
+   */
+  cancelIcon?: string | undefined;
+  /**
+   * Inline style of the component.
+   */
+  style?: unknown;
+  /**
+   * Style class of the component.
+   */
+  class?: unknown;
+  /**
+   * Used to pass all properties of the ButtonProps to the choose button inside the component.
+   * @type {ButtonProps}
+   * @defaultValue null
+   */
+  chooseButtonProps?: object | undefined;
+  /**
+   * Used to pass all properties of the ButtonProps to the upload button inside the component.
+   * @type {ButtonProps}
+   * @defaultValue { severity: 'secondary' }
+   */
+  uploadButtonProps?: object | undefined;
+  /**
+   * Used to pass all properties of the ButtonProps to the cancel button inside the component.
+   * @type {ButtonProps}
+   * @defaultValue { severity: 'secondary' }
+   */
+  cancelButtonProps?: object | undefined;
+}
+
+/**
+ * Extended interface for a customizable FileUpload component.
+ *
+ * Combines selected properties from IFile and FileUploadProps,
+ * while omitting and overriding specific ones for more control.
+ */
+export default interface IVFileUpload extends
+  Partial<Omit<IFile, 'accept' | 'error'>>,
+  Partial<Omit<FileUploadProps, 'auto' | 'mode' | 'multiple'>> {
+
+  /**
+   * If true, enables the advanced mode of the file upload component,
+   * which may include features like drag-and-drop, file previews, etc.
+   */
+  advanced?: boolean;
+}

From 16f0617df26cc7dd96923b2eb44c06b7172c7e07 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Thu, 24 Jul 2025 19:20:37 +0200
Subject: [PATCH 05/26] =?UTF-8?q?=E2=9C=A8=20File=20component=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFile.vue | 213 ++++++++++++++++++++++++++++++++++
 1 file changed, 213 insertions(+)
 create mode 100644 src/components/file/VFile.vue

diff --git a/src/components/file/VFile.vue b/src/components/file/VFile.vue
new file mode 100644
index 0000000..c0cd0a3
--- /dev/null
+++ b/src/components/file/VFile.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import VBadge from '../badge/VBadge.vue';
+import VButton from '../button/VButton.vue';
+import VProgressBar from '../progressbar/VProgressBar.vue';
+import { usePrimeVue } from 'primevue';
+import { ref, computed } from 'vue';
+import styles from '@visua/typography.module.css';
+
+export interface IVFile {
+  file: File
+  advanced?: boolean
+  index?: number
+  removeFileCallback?: (index: number) => void
+  status?: 'pending' | 'completed' | 'error'
+  progress?: number
+}
+
+const props = withDefaults(defineProps<IVFile>(), {
+  advanced: false,
+  index: 0,
+  removeFileCallback: () => {},
+  status: 'pending',
+  progress: 0,
+})
+
+const badgeType = computed(() => {
+  switch (props.status) {
+    case 'pending': return 'warning'
+    case 'completed': return 'success'
+    case 'error': return 'error'
+    default:
+      return undefined;
+  }
+})
+
+const badgeLabel = computed(() => {
+  switch (props.status) {
+    case 'pending': return 'En attente'
+    case 'completed': return 'Terminé'
+    case 'error': return 'Annulé'
+    default:
+      return '';
+  }
+})
+
+const $primevue = usePrimeVue();
+const totalSize = ref(0);
+const totalSizePercent = ref(0);
+
+const formatSize = (bytes: number) => {
+  const k = 1024;
+  const dm = 3;
+  const sizes = $primevue.config.locale?.fileSizeTypes ?? ['B', 'KB', 'MB', 'GB', 'TB'];;
+
+  if (bytes === 0) {
+    return `0 ${ sizes[0]}`;
+  }
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const formattedSize = parseFloat((bytes / k ** i).toFixed(dm));
+
+  return `${formattedSize} ${sizes[i]}`;
+};
+
+const onRemoveTemplatingFile = (file: File, removeFileCallback: (index: number) => void, index: number) => {
+  removeFileCallback(index);
+  totalSize.value -= parseInt(formatSize(file.size));
+  totalSizePercent.value = totalSize.value / 10;
+};
+
+const getFileIconClass = (file: File) => {
+  const type = file.name.toLowerCase();
+  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('.xls') || type.endsWith('.xlsx')) return 'ri-file-excel-2-line';
+  if (type.endsWith('.txt')) return 'ri-file-text-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();
+  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('.xls') || type.endsWith('.xlsx')) return 'var(--border-plain-success)'; // vert
+  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
+  return 'var(--border-plain-blue-france)'; // bleu marine
+};
+
+const borderColor = computed(() => {
+  switch (props.status) {
+    case 'pending': return '2px solid var(--system-color-950-warning-active)';
+    case 'completed': return '2px solid var(--system-color-950-success-active)';
+    case 'error': return '2px solid var(--system-color-950-success-active)';
+    default:
+      return undefined;
+  }
+})
+
+const getImagePreview = (file: File) => {
+  return URL.createObjectURL(file);
+};
+</script>
+
+<template>
+  <div
+    v-if="props.advanced"
+    class="advanced-file"
+    :title="`Fichier : ${props.file.name}`"
+    :style="{border: borderColor}"
+  >
+    <div>
+      <img
+        v-if="file.type.startsWith('image/')"
+        role="presentation"
+        :alt="props.file.name"
+        :src="getImagePreview(props.file)"
+      />
+      <i
+        v-else
+        :class="getFileIconClass(props.file)"
+        :style="{color: getFileIconColor(props.file), fontSize: '6.25rem'}"
+      />
+    </div>
+    <span :title="props.file.name" class="file-name">
+      {{ props.file.name }}
+    </span>
+    <div>{{ formatSize(props.file.size) }}</div>
+    <VBadge
+      v-if="advanced"
+      :label="badgeLabel"
+      :type="badgeType"
+      small
+      no-icon
+    />
+    <VProgressBar
+      v-if="advanced && status === 'pending'"
+      :value="props.progress"
+      :show-value="false"
+      style="width: 100%; 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/')"
+        role="presentation"
+        :alt="props.file.name"
+        :src="getImagePreview(props.file)"
+      />
+      <i
+        v-else
+        :class="getFileIconClass(props.file)"
+        :style="{color: getFileIconColor(props.file), fontSize: '2.5rem', padding: '0px'}"
+      />
+    </div>
+    <div class="file-info" :class="[styles['text-body-SM-detail-text-Regular']]">
+      <span>{{ props.file.name }}</span>
+      <span>{{ formatSize(props.file.size) }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+img{
+  width: 2.5rem;
+  height: auto;
+}
+
+.advanced-file{
+  border-radius: 3px;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.simple-file{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--p-fileupload-content-gap) / 4);
+}
+
+.file-name{
+  max-width: 7.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-info{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  gap: 0.025rem;
+}
+</style>

From 1acd65a704a02c30fa9b6280768d5b22054e7961 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Thu, 24 Jul 2025 19:21:25 +0200
Subject: [PATCH 06/26] =?UTF-8?q?=E2=9C=A8=20File=20upload=20component=20a?=
 =?UTF-8?q?dded?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFileUpload.vue | 371 ++++++++++++++++++++++++++++
 1 file changed, 371 insertions(+)
 create mode 100644 src/components/file/VFileUpload.vue

diff --git a/src/components/file/VFileUpload.vue b/src/components/file/VFileUpload.vue
new file mode 100644
index 0000000..9f47ec5
--- /dev/null
+++ b/src/components/file/VFileUpload.vue
@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import FileUpload from 'primevue/fileupload';
+import VHint from '../hint/VHint.vue';
+import VLabel from '../label/VLabel.vue';
+import VButton from '../button/VButton.vue';
+import VButtonGroup from '../button/VButtonGroup.vue';
+import VFile from './VFile.vue';
+import VMessage from '../message/VMessage.vue';
+import type IVFileUpload from './IVFileUpload.type';
+import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload';
+import { computed, useId, ref, onMounted } from 'vue';
+import styles from '@visua/typography.module.css';
+
+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',
+  validMessage: '',
+  hint: '',
+  disabled: false,
+  invalidFileSizeMessage: 'Taille de fichier invalide, la taille du fichier doit être plus petite que {1.}',
+  invalidFileLimitMessage: 'Nombre maximal des fichiers atteint, le nombre maximal est {0.}',
+  invalidFileTypeMessage: 'Type de fichier invalide, le type de fichier {0} n\'est pas pris en charge',
+  accept: undefined,
+  chooseLabel: 'Choisir',
+  name: undefined,
+  url: undefined,
+  maxFileSize: undefined,
+  fileLimit: undefined,
+  withCredentials: false,
+  previewWidth: 50,
+  uploadLabel: 'Téléverser',
+  cancelLabel: 'Annuler',
+  showCancelButton: true,
+  showUploadButton: true,
+  advanced: false,
+})
+
+const emit = defineEmits([
+  'select',
+  'before-upload',
+  'progress',
+  'upload',
+  'error',
+  'before-send',
+  'clear',
+  'remove',
+  'removeUploadFile',
+  'uploader',
+]);
+const fileSelected = ref(false);
+const hasActiveError = ref(false);
+
+const lastSelectedFile = ref<File | null>(null);
+
+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]);
+  }
+  fileSelected.value = true;
+};
+
+
+const handleClear = () => {
+  emit('clear');
+  fileSelected.value = false;
+  lastSelectedFile.value = null;
+  hasActiveError.value = false;
+};
+
+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;
+  lastSelectedFile.value = null;
+  hasActiveError.value =false;
+};
+
+const handleProgress = (event: FileUploadProgressEvent) => {
+  emit('progress', event);
+
+  const files = fileUploadRef.value?.files || [];
+  files.forEach((file: File) => {
+    fileProgressMap.value[file.name] = event.progress;
+  });
+};
+
+const handleError = (event: FileUploadErrorEvent) => {
+  emit('error', event);
+  hasActiveError.value = true;
+}
+
+const error = computed(() => hasActiveError.value);
+
+
+const isSimpleAndEmpty = computed(() => {
+  return !props.advanced && !fileSelected.value;
+});
+
+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 labelState = computed(() => {
+  if(!error.value && !props.disabled) return 'default';
+  else if(error.value && !props.disabled) return 'error';
+  else return undefined
+})
+
+type MessageType = 'alert' | 'warning' | 'success' | 'info';
+
+const globalStatusMessage = computed<{
+  type: MessageType;
+  title: string;
+} | null>(() => {
+  const files = fileUploadRef.value?.files || [];
+  const uploaded = fileUploadRef.value?.uploadedFiles || [];
+
+  const hasError = files.some((f: { status: string; }) => f.status === 'error');
+  const hasPending = files.length > 0;
+
+  if (hasError) return { type: 'alert', title: 'Erreur lors du téléversement' };
+  if (hasPending) return { type: 'warning', title: 'En attente de téléversement' };
+  if (uploaded.length > 0) return { type: 'success', title: 'Tous les fichiers ont été téléversés' };
+  return null;
+});
+
+
+</script>
+
+<template>
+  <div class="container">
+    <VLabel
+      :for="`file-upload-${props.id}`"
+      :label="props.label"
+      :disabled="props.disabled"
+      :type="labelState"
+      :hint="props.hint"
+    />
+    <FileUpload
+      ref="fileUploadRef"
+      :id="`file-upload-${props.id}`"
+      :multiple="props.advanced"
+      :invalid-file-limit-message="props.invalidFileLimitMessage"
+      :invalid-file-size-message="props.invalidFileSizeMessage"
+      :invalid-file-type-message="props.invalidFileTypeMessage"
+      mode="advanced"
+      :accept="props.accept"
+      :disabled="props.disabled"
+      v-bind="$attrs"
+      :auto="!props.advanced"
+      :choose-label="props.chooseLabel"
+      :upload-label="props.uploadLabel"
+      :cancel-label="props.cancelLabel"
+      :name="props.name"
+      :url="props.url"
+      :max-file-size="props.maxFileSize"
+      :file-limit="props.fileLimit"
+      :with-credentials="props.withCredentials"
+      :preview-width="props.previewWidth"
+      :show-cancel-button="props.showCancelButton"
+      :show-upload-button="props.showUploadButton"
+      @select="handleSelect($event)"
+      @before-send="emit('before-send', $event)"
+      @progress="handleProgress($event)"
+      @before-upload="emit('before-upload', $event)"
+      @uploader="emit('uploader', $event)"
+      @upload="handleUpload($event)"
+      @error="handleError($event)"
+      @clear="handleClear()"
+      @remove="handleRemove($event)"
+      @remove-uploaded-file="emit('removeUploadFile', $event)"
+      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"
+            :disabled="props.disabled"
+            inlineLayoutWhen="always"
+            title="boutons de gestion des 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"
+            :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>
+          </div>
+        </div>
+        <div v-else-if="slotProps.files.length > 0" class="simple-container-content">
+          <VFile
+            :file="getLastFileSelected(slotProps.files)"
+            :remove-file-callback="slotProps.removeFileCallback"
+          />
+        </div>
+        <VHint
+          v-for="message of slotProps.messages"
+          :key="message"
+          :title="message"
+          type="alert"
+          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>
+
+<style lang="css" scoped>
+*{
+  margin: 0px;
+  padding: 0px;
+}
+
+.container {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.5rem;
+}
+
+.p-fileupload{
+  width: 100%;
+  --p-fileupload-border-color: v-bind(borderColor);
+  padding: v-bind(padding);
+}
+
+.simple-fileupload-header{
+  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;
+}
+
+.fileupload-empty{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.upload-cloud-icon{
+  font-size: 5rem;
+  color: var(--border-contrast-grey);
+}
+
+.file-area{
+  margin-top: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 0.25rem;
+}
+</style>

From ea2a8a9bd170f37af6acdeff34e30fab5e2cddc1 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Thu, 24 Jul 2025 19:22:03 +0200
Subject: [PATCH 07/26] Display some file upload components

---
 src/App.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 61efa4d..1f2a29d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,11 @@
 // import VAccordionView from '../template/VAccordionView.vue';
 // import VInputView from '../template/VInputView.vue';
 // import VCheckboxView from '../template/VCheckboxView.vue';
-import VBadgeView from '../template/VBadgeView.vue';
-import VSelectView from '../template/VSelectView.vue';
+// import VBadgeView from '../template/VBadgeView.vue';
+// import VSelectView from '../template/VSelectView.vue';
 // import VProgressBarView from '../template/VProgressBarView.vue';
-import VMessageView from '../template/VMessageView.vue';
+// import VMessageView from '../template/VMessageView.vue';
+import VFileUploadView from '../template/VFileUploadView.vue'
 </script>
 
 
@@ -19,8 +20,9 @@ import VMessageView from '../template/VMessageView.vue';
   <!-- <VAccordionView/> -->
   <!-- <VInputView/> -->
   <!-- <VCheckboxView/> -->
-  <VBadgeView/>
-  <VSelectView/>
+  <!-- <VBadgeView/>
+  <VSelectView/> -->
   <!-- <VProgressBarView/> -->
-  <VMessageView/>
+  <!-- <VMessageView/> -->
+   <VFileUploadView/>
 </template>

From d72f0b67d23975f29cee88a6e8c9a58d1b436da3 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Fri, 25 Jul 2025 11:19:21 +0200
Subject: [PATCH 08/26] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20FileUpload=20c?=
 =?UTF-8?q?omponent=20interface=20file=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/IVFileUpload.type.ts | 27 ++++++++++++++++--------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/file/IVFileUpload.type.ts b/src/components/file/IVFileUpload.type.ts
index 707f95c..e77f0a9 100644
--- a/src/components/file/IVFileUpload.type.ts
+++ b/src/components/file/IVFileUpload.type.ts
@@ -181,18 +181,27 @@ export interface FileUploadProps {
 }
 
 /**
- * Extended interface for a customizable FileUpload component.
+ * Extended interface for the customizable VFileUpload component.
  *
- * Combines selected properties from IFile and FileUploadProps,
- * while omitting and overriding specific ones for more control.
+ * This interface merges selected properties from:
+ * - `IFile`: your internal file-related interface
+ * - `FileUploadProps`: the native PrimeVue <FileUpload> component props
+ *
+ * It omits and overrides specific properties to provide better control
+ * over the component's behavior and to avoid conflicts with internal logic.
  */
-export default interface IVFileUpload extends
-  Partial<Omit<IFile, 'accept' | 'error'>>,
-  Partial<Omit<FileUploadProps, 'auto' | 'mode' | 'multiple'>> {
+export default interface IVFileUpload
+  extends Partial<Omit<IFile, 'accept' | 'error'>>, // Exclude 'accept' and 'error' from IFile
+          Partial<Omit<FileUploadProps, 'auto' | 'mode' | 'multiple'>> // Exclude 'auto', 'mode', and 'multiple' from PrimeVue
 
+{
   /**
-   * If true, enables the advanced mode of the file upload component,
-   * which may include features like drag-and-drop, file previews, etc.
+   * Defines the display mode of the file upload component.
+   * - 'advanced': enables a rich interface with manual control over upload actions
+   * - 'simple': enables a minimal interface with automatic upload behavior
+   *
+   * This property is used internally to determine layout, behavior, and slot rendering.
    */
-  advanced?: boolean;
+  option?: 'advanced' | 'simple';
 }
+

From 0d925df378dd14e31adfa3b9ed938a1abf7be07a Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Fri, 25 Jul 2025 18:29:22 +0200
Subject: [PATCH 09/26] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20FileUpload=20c?=
 =?UTF-8?q?omponent=20interface=20file=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/IVFileUpload.type.ts | 27 ++++++++----------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/file/IVFileUpload.type.ts b/src/components/file/IVFileUpload.type.ts
index e77f0a9..707f95c 100644
--- a/src/components/file/IVFileUpload.type.ts
+++ b/src/components/file/IVFileUpload.type.ts
@@ -181,27 +181,18 @@ export interface FileUploadProps {
 }
 
 /**
- * Extended interface for the customizable VFileUpload component.
+ * Extended interface for a customizable FileUpload component.
  *
- * This interface merges selected properties from:
- * - `IFile`: your internal file-related interface
- * - `FileUploadProps`: the native PrimeVue <FileUpload> component props
- *
- * It omits and overrides specific properties to provide better control
- * over the component's behavior and to avoid conflicts with internal logic.
+ * Combines selected properties from IFile and FileUploadProps,
+ * while omitting and overriding specific ones for more control.
  */
-export default interface IVFileUpload
-  extends Partial<Omit<IFile, 'accept' | 'error'>>, // Exclude 'accept' and 'error' from IFile
-          Partial<Omit<FileUploadProps, 'auto' | 'mode' | 'multiple'>> // Exclude 'auto', 'mode', and 'multiple' from PrimeVue
+export default interface IVFileUpload extends
+  Partial<Omit<IFile, 'accept' | 'error'>>,
+  Partial<Omit<FileUploadProps, 'auto' | 'mode' | 'multiple'>> {
 
-{
   /**
-   * Defines the display mode of the file upload component.
-   * - 'advanced': enables a rich interface with manual control over upload actions
-   * - 'simple': enables a minimal interface with automatic upload behavior
-   *
-   * This property is used internally to determine layout, behavior, and slot rendering.
+   * If true, enables the advanced mode of the file upload component,
+   * which may include features like drag-and-drop, file previews, etc.
    */
-  option?: 'advanced' | 'simple';
+  advanced?: boolean;
 }
-

From fc64beda13b50f4cd76fd75158bdb853193ac396 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Fri, 25 Jul 2025 18:30:52 +0200
Subject: [PATCH 10/26] =?UTF-8?q?=F0=9F=90=9B=20fix:=20File=20upload=20com?=
 =?UTF-8?q?ponent=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFileUpload.vue | 231 +++++++++++++---------------
 1 file changed, 104 insertions(+), 127 deletions(-)

diff --git a/src/components/file/VFileUpload.vue b/src/components/file/VFileUpload.vue
index 9f47ec5..64dad30 100644
--- a/src/components/file/VFileUpload.vue
+++ b/src/components/file/VFileUpload.vue
@@ -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{

From 4d343e7f87ac0c29406c76260f8c57c316bdfd5c Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Fri, 25 Jul 2025 18:31:48 +0200
Subject: [PATCH 11/26] =?UTF-8?q?=F0=9F=90=9B=20fix:=20File=20component=20?=
 =?UTF-8?q?updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFile.vue | 84 +++++++++++++++++++++--------------
 1 file changed, 50 insertions(+), 34 deletions(-)

diff --git a/src/components/file/VFile.vue b/src/components/file/VFile.vue
index c0cd0a3..1a6fcff 100644
--- a/src/components/file/VFile.vue
+++ b/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();
-  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('.xls') || type.endsWith('.xlsx')) return 'ri-file-excel-2-line';
-  if (type.endsWith('.txt')) return 'ri-file-text-line';
-  if (type.endsWith('.zip') || type.endsWith('.rar')) return 'ri-file-zip-line';
+  const type = file?.name.toLowerCase();
+  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('.xls') || type?.endsWith('.xlsx')) return 'ri-file-excel-2-line';
+  if (type?.endsWith('.txt')) return 'ri-file-text-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();
-  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('.xls') || type.endsWith('.xlsx')) return 'var(--border-plain-success)'; // vert
-  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
+  const type = file?.name.toLowerCase();
+  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('.xls') || type?.endsWith('.xlsx')) return 'var(--border-plain-success)'; // vert
+  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
   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">
-      {{ props.file.name }}
+    <span :title="props.file?.name" class="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;"
-    />
-    <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"
+      style="width: 6rem; margin-top: 0.5rem;"
     />
   </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>{{ formatSize(props.file.size) }}</span>
+      <span>{{ props.file?.name }}</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{

From bcc2e33d0d584be4f69dd182ad95baadb554fcd1 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sat, 26 Jul 2025 12:49:43 +0200
Subject: [PATCH 12/26] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20scrollpanel=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/scrollpanel.css | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/assets/style/primevue-style/scrollpanel.css

diff --git a/src/assets/style/primevue-style/scrollpanel.css b/src/assets/style/primevue-style/scrollpanel.css
new file mode 100644
index 0000000..aa06f8c
--- /dev/null
+++ b/src/assets/style/primevue-style/scrollpanel.css
@@ -0,0 +1,11 @@
+:root {
+  --p-scrollpanel-bar-size: 0.5rem;
+  --p-scrollpanel-bar-border-radius: 0.25rem;
+  --p-scrollpanel-bar-focus-ring-width: var(--focus-width);
+  --p-scrollpanel-bar-focus-ring-style: var(--focus-style);
+  --p-scrollpanel-bar-focus-ring-color: var(--focus-color);
+  --p-scrollpanel-bar-focus-ring-offset: var(--focus-offset);
+  --p-scrollpanel-bar-focus-ring-shadow: none;
+  --p-scrollpanel-transition-duration: var(--transition-duration);
+  --p-scrollpanel-bar-background: var(--background-overlay-grey);
+}

From e9247149fef83ca4629749b39a75ab60d69d1a88 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sat, 26 Jul 2025 12:50:08 +0200
Subject: [PATCH 13/26] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 305d47b..8120b3b 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -14,3 +14,4 @@
 @import './primevue-style/iconfield.css';
 @import './primevue-style/progressbar.css';
 @import './primevue-style/fileupload.css';
+@import './primevue-style/scrollpanel.css';

From 2c6c693ceb4c77253d9edd8a07abcdaba12204c7 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sat, 26 Jul 2025 12:54:39 +0200
Subject: [PATCH 14/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Scroll=20panel=20c?=
 =?UTF-8?q?omponent=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scrollpanel/VScrollpanel.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/components/scrollpanel/VScrollpanel.vue

diff --git a/src/components/scrollpanel/VScrollpanel.vue b/src/components/scrollpanel/VScrollpanel.vue
new file mode 100644
index 0000000..8f9caf5
--- /dev/null
+++ b/src/components/scrollpanel/VScrollpanel.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import ScrollPanel from 'primevue';
+
+const props = withDefaults(defineProps<{
+  step?: number
+  height: string
+  width?: string
+}>(), {
+  step: 5,
+  width: '100%'
+});
+</script>
+
+<template>
+  <ScrollPanel :step="props.step" :style="{width: props.width, height: props.height}"/>
+</template>

From 6f1a6b930c1ce03d0da939b9dd8cd3ec57f92889 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sat, 26 Jul 2025 14:19:48 +0200
Subject: [PATCH 15/26] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20Scrol?=
 =?UTF-8?q?l=20panel=20component=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scrollpanel/VScrollpanel.vue | 23 +++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/scrollpanel/VScrollpanel.vue b/src/components/scrollpanel/VScrollpanel.vue
index 8f9caf5..49e6b9c 100644
--- a/src/components/scrollpanel/VScrollpanel.vue
+++ b/src/components/scrollpanel/VScrollpanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ScrollPanel from 'primevue';
+import ScrollPanel from 'primevue/scrollpanel';
 
 const props = withDefaults(defineProps<{
   step?: number
@@ -12,5 +12,24 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-  <ScrollPanel :step="props.step" :style="{width: props.width, height: props.height}"/>
+  <ScrollPanel
+    :step="props.step"
+    class="p-scrollpanel-content"
+    :style="{width: props.width, maxHeight: props.height}"
+  >
+    <slot/>
+  </ScrollPanel>
 </template>
+
+<style lang="css" scoped>
+*{
+  margin: 0px;
+  padding: 0px;
+}
+
+.p-scrollpanel {
+  height: fit-content;
+  overflow-y: auto;
+  box-sizing: content-box;
+}
+</style>

From 0ca59dbc5963f2663ae7d42c9041c7c44b112f4d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sat, 26 Jul 2025 14:20:47 +0200
Subject: [PATCH 16/26] =?UTF-8?q?=F0=9F=90=9B=20fix:=20File=20upload=20com?=
 =?UTF-8?q?ponent=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFileUpload.vue | 67 +++++++++++++++++------------
 1 file changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/components/file/VFileUpload.vue b/src/components/file/VFileUpload.vue
index 64dad30..31f596c 100644
--- a/src/components/file/VFileUpload.vue
+++ b/src/components/file/VFileUpload.vue
@@ -6,6 +6,7 @@ import VButton from '../button/VButton.vue';
 import VButtonGroup from '../button/VButtonGroup.vue';
 import VFile from './VFile.vue';
 import VMessage from '../message/VMessage.vue';
+import VScrollpanel from '../scrollpanel/VScrollpanel.vue';
 import type IVFileUpload from './IVFileUpload.type';
 import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload';
 import { computed, useId, ref, onMounted } from 'vue';
@@ -67,7 +68,6 @@ const handleSelect = (event: FileUploadSelectEvent) => {
   if (!props.advanced && event.files.length > 0 && fileUploadRef.value) {
     fileUploadRef.value.files = [event.files.at(-1)];
     lastSelectedFile.value = event.files.at(-1);
-
   }
   fileSelected.value = true;
 };
@@ -241,36 +241,40 @@ const globalStatusMessage = computed<{
         </div>
       </template>
       <template #content="slotProps">
-        <div v-if="props.advanced" style="margin-top: 0.5rem;">
+        <div v-if="props.advanced" style="margin-top: 0.75rem;" class="file-content">
           <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>
+          <VScrollpanel height="20rem">
+            <div class="file-area">
+              <div v-if="slotProps.files.length > 0" class="file-non-uploaded-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-uploaded-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>
+          </VScrollpanel>
         </div>
         <div v-else>
           <VFile
@@ -339,8 +343,17 @@ const globalStatusMessage = computed<{
   color: var(--border-contrast-grey);
 }
 
+.file-content,
 .file-area{
-  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-content{gap: 0.75rem;}
+.file-area{gap: 0.5rem;}
+
+.file-non-uploaded-area,
+.file-uploaded-area {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 0.25rem;

From fbfa6e33fcceb06d8971df4fdd3b5868926fe575 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sat, 26 Jul 2025 15:07:48 +0200
Subject: [PATCH 17/26] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bugs=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFileUpload.vue | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/file/VFileUpload.vue b/src/components/file/VFileUpload.vue
index 31f596c..cf6cfbf 100644
--- a/src/components/file/VFileUpload.vue
+++ b/src/components/file/VFileUpload.vue
@@ -9,14 +9,12 @@ import VMessage from '../message/VMessage.vue';
 import VScrollpanel from '../scrollpanel/VScrollpanel.vue';
 import type IVFileUpload from './IVFileUpload.type';
 import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload';
-import { computed, useId, ref, onMounted } from 'vue';
+import { computed, useId, ref } 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,
@@ -67,15 +65,12 @@ const handleSelect = (event: FileUploadSelectEvent) => {
   emit('select', event);
   if (!props.advanced && event.files.length > 0 && fileUploadRef.value) {
     fileUploadRef.value.files = [event.files.at(-1)];
-    lastSelectedFile.value = event.files.at(-1);
+    fileUploadRef.value.uploadedFiles = [];
   }
-  fileSelected.value = true;
 };
 
 const handleClear = () => {
   emit('clear');
-  fileSelected.value = false;
-  lastSelectedFile.value = null;
   hasActiveError.value = false;
 };
 
@@ -85,8 +80,6 @@ const handleUpload = (event: FileUploadUploadEvent) => {
 
 const handleRemove = (event: FileUploadRemoveEvent) => {
   emit('remove', event);
-  fileSelected.value = false;
-  lastSelectedFile.value = null;
   hasActiveError.value =false;
 };
 
@@ -104,15 +97,16 @@ const handleError = (event: FileUploadErrorEvent) => {
   hasActiveError.value = true;
 }
 
+const lastSelectedFile = computed(() => {
+  const files = fileUploadRef.value?.files || [];
+  return files.at(-1) ?? null;
+});
+
+
 const uploadEvent = (callback: () => void) => {
   callback();
 };
 
-onMounted(() => {
-  const currentFiles = fileUploadRef.value?.files || [];
-  fileSelected.value = currentFiles.length > 0;
-});
-
 const padding = computed(() => props.advanced ? '1.125rem' : '0rem')
 const borderColor = computed(() => props.advanced ? 'var(--border-default-grey)' : 'transparent');
 

From f15fdb8e1826a95d9a6ff5da1212c71b83b5132d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 00:27:20 +0200
Subject: [PATCH 18/26] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bugs=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFileUpload.vue | 43 +++++++++++++++++------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/file/VFileUpload.vue b/src/components/file/VFileUpload.vue
index cf6cfbf..e48b3f2 100644
--- a/src/components/file/VFileUpload.vue
+++ b/src/components/file/VFileUpload.vue
@@ -7,6 +7,7 @@ import VButtonGroup from '../button/VButtonGroup.vue';
 import VFile from './VFile.vue';
 import VMessage from '../message/VMessage.vue';
 import VScrollpanel from '../scrollpanel/VScrollpanel.vue';
+import VLabelErrorProxy from './VLabelErrorProxy.vue';
 import type IVFileUpload from './IVFileUpload.type';
 import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload';
 import { computed, useId, ref } from 'vue';
@@ -26,7 +27,7 @@ const props = withDefaults(defineProps<IVFileUpload>(), {
   validMessage: '',
   hint: '',
   disabled: false,
-  invalidFileSizeMessage: 'Taille de fichier invalide, la taille du fichier doit être plus petite que {1.}',
+  invalidFileSizeMessage: 'Taille de fichier {0} invalide, la taille du fichier doit être plus petite que {1}',
   invalidFileLimitMessage: 'Nombre maximal des fichiers atteint, le nombre maximal est {0.}',
   invalidFileTypeMessage: 'Type de fichier invalide, le type de fichier {0} n\'est pas pris en charge',
   accept: undefined,
@@ -95,6 +96,9 @@ const handleProgress = (event: FileUploadProgressEvent) => {
 const handleError = (event: FileUploadErrorEvent) => {
   emit('error', event);
   hasActiveError.value = true;
+  if (!props.advanced && fileUploadRef.value) {
+    fileUploadRef.value.uploadedFiles = [];
+  }
 }
 
 const lastSelectedFile = computed(() => {
@@ -102,7 +106,6 @@ const lastSelectedFile = computed(() => {
   return files.at(-1) ?? null;
 });
 
-
 const uploadEvent = (callback: () => void) => {
   callback();
 };
@@ -110,11 +113,9 @@ const uploadEvent = (callback: () => void) => {
 const padding = computed(() => props.advanced ? '1.125rem' : '0rem')
 const borderColor = computed(() => props.advanced ? 'var(--border-default-grey)' : 'transparent');
 
-const error = computed(() => hasActiveError.value);
-
 const labelState = computed(() => {
-  if(!error.value && !props.disabled) return 'default';
-  else if(error.value && !props.disabled) return 'error';
+  if(!hasActiveError.value && !props.disabled) return 'default';
+  else if(hasActiveError.value && !props.disabled) return 'error';
   else return undefined
 })
 
@@ -221,21 +222,21 @@ const globalStatusMessage = computed<{
             title="parcourir les fichiers"
           />
           <span
-            v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0)"
+            v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0) && !hasActiveError"
             :class="[styles['text-body-SM-detail-text-Regular']]"
           >
             Aucun fichier sélectionné
           </span>
         </div>
       </template>
-      <template #empty>
-        <div class="fileupload-empty" v-if="props.advanced" :class="[styles['text-body-SM-detail-text-Regular']]">
+      <template #empty v-if="props.advanced && !hasActiveError">
+        <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" style="margin-top: 0.75rem;" class="file-content">
+        <div v-if="props.advanced && !hasActiveError" style="margin-top: 0.75rem;" class="file-content">
           <VMessage
             v-if="globalStatusMessage"
             :type="globalStatusMessage.type"
@@ -270,7 +271,7 @@ const globalStatusMessage = computed<{
             </div>
           </VScrollpanel>
         </div>
-        <div v-else>
+        <div v-if="!props.advanced && !hasActiveError">
           <VFile
             v-if="lastSelectedFile"
             :file="lastSelectedFile"
@@ -284,13 +285,19 @@ const globalStatusMessage = computed<{
             status="completed"
           />
         </div>
-        <VHint
-          v-for="message of slotProps.messages"
-          :key="message"
-          :title="message"
-          type="alert"
-          icon
-        />
+        <div
+          role="alert"
+          aria-live="polite"
+        >
+          <VHint
+            v-for="message of slotProps.messages"
+            :key="message"
+            :title="message"
+            type="alert"
+            icon
+          />
+        </div>
+        <VLabelErrorProxy :hasError="(slotProps.messages ?? []).length > 0" @update:error="hasActiveError = $event" />
       </template>
     </FileUpload>
   </div>

From 605f6af3b92615ebb15670ee3288c21b7bf3e25d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 00:30:34 +0200
Subject: [PATCH 19/26] =?UTF-8?q?=E2=9C=A8=20feature:=20label=20error=20pr?=
 =?UTF-8?q?oxy=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VLabelErrorProxy.vue | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/components/file/VLabelErrorProxy.vue

diff --git a/src/components/file/VLabelErrorProxy.vue b/src/components/file/VLabelErrorProxy.vue
new file mode 100644
index 0000000..f56afe3
--- /dev/null
+++ b/src/components/file/VLabelErrorProxy.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { onMounted, onUpdated, watch } from 'vue';
+
+const props = defineProps<{
+  hasError: boolean
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:error', value: boolean): void
+}>();
+
+onMounted(() => {
+  emit('update:error', props.hasError);
+});
+
+onUpdated(() => {
+  emit('update:error', props.hasError);
+});
+
+watch(() => props.hasError, (val) => {
+  emit('update:error', val);
+});
+</script>

From b8076575835cffdc1fdf7ca4f80292de07093cb0 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 02:43:09 +0200
Subject: [PATCH 20/26] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bugs=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VLabelErrorProxy.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/file/VLabelErrorProxy.vue b/src/components/file/VLabelErrorProxy.vue
index f56afe3..1274c65 100644
--- a/src/components/file/VLabelErrorProxy.vue
+++ b/src/components/file/VLabelErrorProxy.vue
@@ -21,3 +21,7 @@ watch(() => props.hasError, (val) => {
   emit('update:error', val);
 });
 </script>
+
+<template>
+  <slot/>
+</template>

From 80a0cb656acc28a2e1f8b5f4d39e99f270bbac6c Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 03:58:07 +0200
Subject: [PATCH 21/26] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bugs=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/file/VFileUpload.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/file/VFileUpload.vue b/src/components/file/VFileUpload.vue
index e48b3f2..59f6ef5 100644
--- a/src/components/file/VFileUpload.vue
+++ b/src/components/file/VFileUpload.vue
@@ -140,7 +140,7 @@ const globalStatusMessage = computed<{
 </script>
 
 <template>
-  <div class="container">
+  <div class="container" data-testid="file-label">
     <VLabel
       :for="`file-upload-${props.id}`"
       :label="props.label"

From 2938e3bd2bfe4aea36840112bc6eb3e19d6f81cc Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 03:58:56 +0200
Subject: [PATCH 22/26] =?UTF-8?q?=E2=9C=85=20test:=20added=20test=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VFileUpload.spec.ts | 45 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 test/VFileUpload.spec.ts

diff --git a/test/VFileUpload.spec.ts b/test/VFileUpload.spec.ts
new file mode 100644
index 0000000..cd44ec4
--- /dev/null
+++ b/test/VFileUpload.spec.ts
@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import VFileUpload from '../src/components/file/VFileUpload.vue'
+
+describe('VFileUpload emits', () => {
+  it('doit émettre les événements personnalisés', async () => {
+    // Création des mocks
+    const onSelect = vi.fn();
+    const onUpload = vi.fn();
+    const onError = vi.fn();
+    const onRemove = vi.fn();
+    const onClear = vi.fn();
+
+    const wrapper = mount(VFileUpload, {
+      props: {
+        advanced: true,
+        onSelect,
+        onUpload,
+        onError,
+        onRemove,
+        onClear
+      }
+    });
+
+    // Simule une sélection de fichier
+    await wrapper.vm.$emit('select', { files: [{ name: 'test.png' }] });
+    expect(onSelect).toHaveBeenCalledWith({ files: [{ name: 'test.png' }] });
+
+    // Simule une erreur
+    await wrapper.vm.$emit('error', { message: 'Erreur test' });
+    expect(onError).toHaveBeenCalledWith({ message: 'Erreur test' });
+
+    // Simule un upload
+    await wrapper.vm.$emit('upload', { files: ['fichier1'] });
+    expect(onUpload).toHaveBeenCalledWith({ files: ['fichier1'] });
+
+    // Simule une suppression
+    await wrapper.vm.$emit('remove', { file: 'test.png' });
+    expect(onRemove).toHaveBeenCalledWith({ file: 'test.png' });
+
+    // Simule un clear
+    await wrapper.vm.$emit('clear');
+    expect(onClear).toHaveBeenCalled();
+  });
+});

From 4b6ef133fcae5f5584c5861c5bd9948181b92ad4 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 04:02:41 +0200
Subject: [PATCH 23/26] =?UTF-8?q?=F0=9F=93=9D=20docs:=20Updated=20CHANGELO?=
 =?UTF-8?q?G=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15f6f1e..d87b97f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.10] - 2025-07-27
+### Added
+- File compoenent
+- File upload component
+- Scroll panel component
+
 ## [1.0.9] - 2025-07-24
 ### Added
 - Message component

From d0e8163764a35284da225d57406afc45cc183025 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 04:03:36 +0200
Subject: [PATCH 24/26] =?UTF-8?q?=F0=9F=93=9D=20docs:=20README=20file=20up?=
 =?UTF-8?q?dated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 44e4ef0..86e0390 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # visua-vue
 
-**Current version: v1.0.9**
\ No newline at end of file
+**Current version: v1.0.10**
\ No newline at end of file

From 1b2b343e2dfe67a8490d9543098e18b3bd2de673 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 04:05:01 +0200
Subject: [PATCH 25/26] 1.0.9 -> 1.0.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 04b8ff0..e0a863f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

From 43411d7e7ac7136de5fd303c4522116cf9a804e4 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Sun, 27 Jul 2025 04:06:07 +0200
Subject: [PATCH 26/26] 1.0.9 -> 1.0.10

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2cc8904..707beef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cellule-financiere-pmo/visua-vue",
-      "version": "1.0.9",
+      "version": "1.0.10",
       "license": "ISC",
       "dependencies": {
         "@cellule-financiere-pmo/visua": "1.1.3",