From 74ac2d25d19937274bb24a76a6bf68041b382b4a Mon Sep 17 00:00:00 2001
From: ACX <8075870+acx10@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:09:24 -0700
Subject: [PATCH] fix(additional-file-uploader): add file size validation with
 UI feedback (#2516)

---
 .../additional-file-uploader.component.html   |  3 +-
 .../additional-file-uploader.component.ts     | 42 +++++++++++++++++--
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.html b/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.html
index 7ce8de011..0a510481e 100644
--- a/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.html
+++ b/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.html
@@ -43,7 +43,6 @@
 
   <!-- File Upload -->
   <p-fileupload class="file-upload" name="file"
-    [maxFileSize]="maxFileSizeBytes"
     [customUpload]="true"
     [multiple]="false"
     (onSelect)="onFilesSelect($event)"
@@ -81,7 +80,7 @@
                 @for (uploadFile of this.files; track uploadFile; let i = $index) {
                   <div class="file-row">
                     <div class="file-info">
-                      <p-badge [value]="uploadFile.status" [severity]="getBadgeSeverity(uploadFile.status)" class="file-badge"/>
+                      <p-badge [value]="getFileStatusLabel(uploadFile)" [severity]="getBadgeSeverity(uploadFile.status)" class="file-badge"/>
                       <span class="file-name">
                         {{ uploadFile.file.name }}
                       </span>
diff --git a/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.ts b/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.ts
index 2149dcdc7..bce6ce13d 100644
--- a/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.ts
+++ b/booklore-ui/src/app/features/book/components/additional-file-uploader/additional-file-uploader.component.ts
@@ -104,10 +104,26 @@ export class AdditionalFileUploaderComponent implements OnInit, OnDestroy {
     // Only take the first file for single file upload
     if (newFiles.length > 0) {
       const file = newFiles[0];
-      this.files = [{
-        file,
-        status: 'Pending'
-      }];
+
+      if (this.maxFileSizeBytes && file.size > this.maxFileSizeBytes) {
+        const errorMsg = `File exceeds maximum size of ${this.formatSize(this.maxFileSizeBytes)}`;
+        this.files = [{
+          file,
+          status: 'Failed',
+          errorMessage: errorMsg
+        }];
+        this.messageService.add({
+          severity: 'error',
+          summary: 'File Too Large',
+          detail: `${file.name} exceeds the maximum file size of ${this.formatSize(this.maxFileSizeBytes)}`,
+          life: 5000
+        });
+      } else {
+        this.files = [{
+          file,
+          status: 'Pending'
+        }];
+      }
     }
   }
 
@@ -186,6 +202,24 @@ export class AdditionalFileUploaderComponent implements OnInit, OnDestroy {
     }
   }
 
+  getFileStatusLabel(uploadFile: UploadingFile): string {
+    if (uploadFile.status === 'Failed' && uploadFile.errorMessage?.includes('exceeds maximum size')) {
+      return 'Too Large';
+    }
+    switch (uploadFile.status) {
+      case 'Pending':
+        return 'Ready';
+      case 'Uploading':
+        return 'Uploading';
+      case 'Uploaded':
+        return 'Uploaded';
+      case 'Failed':
+        return 'Failed';
+      default:
+        return uploadFile.status;
+    }
+  }
+
   closeDialog(): void {
     this.dialogRef.close();
   }