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] =?UTF-8?q?=F0=9F=90=9B=20fix:=20File=20upload=20component?=
 =?UTF-8?q?=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;