fix(components/forms): file attachment components report file size er…

…rors with appropriate orders of magnitude (#2437) (#2438)
blackbaud · Jul 3, 2024 · 7795565 · 7795565
1 parent af4e92c
commit 7795565
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 27 deletions.
diff --git a/libs/components/forms/src/assets/locales/resources_en_US.json b/libs/components/forms/src/assets/locales/resources_en_US.json
@@ -185,19 +185,19 @@
   },
   "skyux_file_attachment_max_file_size_error_label_text": {
     "_description": "The error message for file attachment max file size error",
-    "message": "Upload a file under {0}KB."
+    "message": "Upload a file under {0}."
   },
   "skyux_file_attachment_max_file_size_error_label_text_with_name": {
     "_description": "The error message for file attachment max file size error",
-    "message": "{0}: Upload a file under {1}KB."
+    "message": "{0}: Upload a file under {1}."
   },
   "skyux_file_attachment_min_file_size_error_label_text": {
     "_description": "The error message for file attachment min file size error",
-    "message": "Upload a file over {0}KB."
+    "message": "Upload a file over {0}."
   },
   "skyux_file_attachment_min_file_size_error_label_text_with_name": {
     "_description": "The error message for file attachment min file size error",
-    "message": "{0}: Upload a file over {1}KB."
+    "message": "{0}: Upload a file over {1}."
   },
   "skyux_file_attachment_label_no_file_chosen": {
     "_description": "Label for single file attachment when no file is chosen",

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.html b/libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.html
@@ -3,15 +3,15 @@
     class="sky-file-attachment-label-wrapper"
     [attr.id]="labelElementId"
     [ngClass]="{
-      'sky-control-label-required': !labelText && required && hasLabelComponent
+      'sky-control-label-required': !labelText && required && hasLabelComponent,
     }"
   >
     <ng-container *ngIf="labelText; else labelContent">
       <span
         *ngIf="!labelHidden"
         class="sky-control-label sky-margin-inline-xs"
         [ngClass]="{
-          'sky-control-label-required': required
+          'sky-control-label-required': required,
         }"
         >{{ labelText }}</span
       ><sky-help-inline
@@ -32,7 +32,7 @@
     class="sky-file-attachment-upload sky-file-attachment sky-file-attachment-target"
     [ngClass]="{
       'sky-file-attachment-accept': acceptedOver,
-      'sky-file-attachment-reject': rejectedOver
+      'sky-file-attachment-reject': rejectedOver,
     }"
     (dragenter)="fileDragEnter($event)"
     (dragover)="fileDragOver($event)"
@@ -136,7 +136,7 @@
       "
       [disabled]="disabled"
       [skyThemeClass]="{
-        'sky-btn-icon-borderless': 'modern'
+        'sky-btn-icon-borderless': 'modern',
       }"
       (click)="deleteFileAttachment()"
       #deleteButton="skyId"
@@ -187,15 +187,15 @@
     [errorName]="'maxFileSize'"
     [errorText]="
       'skyux_file_attachment_max_file_size_error_label_text'
-        | skyLibResources: fileErrorParam
+        | skyLibResources: (fileErrorParam | skyFileSize)
     "
   />
   <sky-form-error
     *ngIf="fileErrorName === 'minFileSize'"
     [errorName]="'minFileSize'"
     [errorText]="
       'skyux_file_attachment_min_file_size_error_label_text'
-        | skyLibResources: fileErrorParam
+        | skyLibResources: (fileErrorParam | skyFileSize)
     "
   />
 </sky-form-errors>

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.spec.ts b/libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.spec.ts
@@ -1453,7 +1453,7 @@ describe('File attachment', () => {
 
     expect(
       fixture.nativeElement.querySelector('sky-form-error')?.textContent.trim(),
-    ).toBe('Error: Upload a file under 50KB.');
+    ).toBe('Error: Upload a file under 50 bytes.');
   });
 
   it('should render file errors and NgControl errors when label text is set', () => {
@@ -1482,7 +1482,7 @@ describe('File attachment', () => {
       fixture.nativeElement
         .querySelectorAll('sky-form-error')[1]
         ?.textContent.trim(),
-    ).toBe('Error: Upload a file under 50KB.');
+    ).toBe('Error: Upload a file under 50 bytes.');
   });
 
   it('should render `labelText` and not label element if `labelText` is set', () => {

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-drop.component.html b/libs/components/forms/src/lib/modules/file-attachment/file-drop.component.html
@@ -3,13 +3,13 @@
     *ngIf="labelText"
     class="sky-control-label sky-font-body-default sky-margin-stacked-xs"
     [ngClass]="{
-      'sky-screen-reader-only': labelHidden
+      'sky-screen-reader-only': labelHidden,
     }"
   >
     <span
       class="sky-margin-inline-xs"
       [ngClass]="{
-        'sky-control-label-required': required
+        'sky-control-label-required': required,
       }"
       >{{ labelText }}</span
     ><span class="sky-screen-reader-only" *ngIf="required">{{
@@ -31,7 +31,7 @@
       class="sky-file-drop-col"
       [ngClass]="{
         'sky-file-drop-accept': acceptedOver,
-        'sky-file-drop-reject': rejectedOver
+        'sky-file-drop-reject': rejectedOver,
       }"
     >
       <button
@@ -190,15 +190,19 @@
       errorName="maxFileSize"
       [errorText]="
         'skyux_file_attachment_max_file_size_error_label_text_with_name'
-          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam
+          | skyLibResources
+            : rejectedFile.file.name
+            : (rejectedFile.errorParam | skyFileSize)
       "
     />
     <sky-form-error
       *ngIf="rejectedFile.errorType === 'minFileSize'"
       errorName="minFileSize"
       [errorText]="
         'skyux_file_attachment_min_file_size_error_label_text_with_name'
-          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam
+          | skyLibResources
+            : rejectedFile.file.name
+            : (rejectedFile.errorParam | skyFileSize)
       "
     />
     <sky-form-error

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-drop.component.spec.ts b/libs/components/forms/src/lib/modules/file-attachment/file-drop.component.spec.ts
@@ -447,7 +447,7 @@ describe('File drop component', () => {
     componentInstance.labelText = 'Label';
 
     componentInstance.minFileSize = 1500;
-    componentInstance.maxFileSize = 3000;
+    componentInstance.maxFileSize = 3073;
     componentInstance.acceptedTypes = 'image/png, image/jpeg';
     fixture.detectChanges();
 
@@ -465,11 +465,11 @@ describe('File drop component', () => {
 
     expect(minSizeError).toBeVisible();
     expect(minSizeError.textContent).toContain(
-      'foo.txt: Upload a file over 1500KB.',
+      'foo.txt: Upload a file over 1 KB.',
     );
     expect(maxSizeError).toBeVisible();
     expect(maxSizeError.textContent).toContain(
-      'bar.jpeg: Upload a file under 3000KB.',
+      'bar.jpeg: Upload a file under 3 KB.',
     );
 
     expect(typeError).toBeVisible();

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-size.pipe.spec.ts b/libs/components/forms/src/lib/modules/file-attachment/file-size.pipe.spec.ts
@@ -10,9 +10,9 @@ describe('File size pipe', () => {
   let decimalPipe: DecimalPipe;
 
   function validateFormatted(
-    value: number | undefined | null,
+    value: number | string | undefined | null,
     expected: string,
-  ) {
+  ): void {
     const result = fileSizePipe.transform(value);
 
     expect(result).toBe(expected);
@@ -34,13 +34,20 @@ describe('File size pipe', () => {
     validateFormatted(1, '1 byte');
     validateFormatted(100, '100 bytes');
     validateFormatted(999, '999 bytes');
+    validateFormatted('1', '1 byte');
+    validateFormatted('100', '100 bytes');
+    validateFormatted('999', '999 bytes');
   });
 
   it('should format kilobytes', function () {
     validateFormatted(1000, '1,000 bytes');
     validateFormatted(1024, '1 KB');
     validateFormatted(102400, '100 KB');
     validateFormatted(1022976, '999 KB');
+    validateFormatted('1000', '1,000 bytes');
+    validateFormatted('1024', '1 KB');
+    validateFormatted('102400', '100 KB');
+    validateFormatted('1022976', '999 KB');
   });
 
   it('should format megabytes', function () {
@@ -49,18 +56,29 @@ describe('File size pipe', () => {
     validateFormatted(1992300, '1.9 MB');
     validateFormatted(104857600, '100 MB');
     validateFormatted(1048471150, '999.9 MB');
+    validateFormatted('1048575', '1,023 KB');
+    validateFormatted('1048576', '1 MB');
+    validateFormatted('1992300', '1.9 MB');
+    validateFormatted('104857600', '100 MB');
+    validateFormatted('1048471150', '999.9 MB');
   });
 
   it('should format gigabytes', function () {
     validateFormatted(1073741823, '1,023.9 MB');
     validateFormatted(1073741824, '1 GB');
     validateFormatted(107374182400, '100 GB');
     validateFormatted(1073634449818, '999.9 GB');
+    validateFormatted('1073741823', '1,023.9 MB');
+    validateFormatted('1073741824', '1 GB');
+    validateFormatted('107374182400', '100 GB');
+    validateFormatted('1073634449818', '999.9 GB');
   });
 
   it('should format values over 1,000 gigabytes as gigabytes', function () {
     validateFormatted(1073741824000, '1,000 GB');
     validateFormatted(10737310865818, '9,999.9 GB');
+    validateFormatted('1073741824000', '1,000 GB');
+    validateFormatted('10737310865818', '9,999.9 GB');
   });
 
   it('should return an empty string when the input is null or undefined', function () {

diff --git a/libs/components/forms/src/lib/modules/file-attachment/file-size.pipe.ts b/libs/components/forms/src/lib/modules/file-attachment/file-size.pipe.ts
@@ -20,7 +20,7 @@ export class SkyFileSizePipe implements PipeTransform {
     this.#resourcesService = resourcesService;
   }
 
-  public transform(input?: number | null): string {
+  public transform(input?: number | string | null): string {
     let decimalPlaces = 0,
       dividend = 1,
       template: string;
@@ -29,6 +29,10 @@ export class SkyFileSizePipe implements PipeTransform {
       return '';
     }
 
+    if (typeof input === 'string') {
+      input = Number.parseInt(input);
+    }
+
     if (Math.abs(input) === 1) {
       template = 'skyux_file_attachment_file_size_b_singular';
     } else if (input < 1024) {

diff --git a/libs/components/forms/src/lib/modules/shared/sky-forms-resources.module.ts b/libs/components/forms/src/lib/modules/shared/sky-forms-resources.module.ts
@@ -119,16 +119,16 @@ const RESOURCES: Record<string, SkyLibResources> = {
       message: '{0}: Upload a file of type {1}.',
     },
     skyux_file_attachment_max_file_size_error_label_text: {
-      message: 'Upload a file under {0}KB.',
+      message: 'Upload a file under {0}.',
     },
     skyux_file_attachment_max_file_size_error_label_text_with_name: {
-      message: '{0}: Upload a file under {1}KB.',
+      message: '{0}: Upload a file under {1}.',
     },
     skyux_file_attachment_min_file_size_error_label_text: {
-      message: 'Upload a file over {0}KB.',
+      message: 'Upload a file over {0}.',
     },
     skyux_file_attachment_min_file_size_error_label_text_with_name: {
-      message: '{0}: Upload a file over {1}KB.',
+      message: '{0}: Upload a file over {1}.',
     },
     skyux_file_attachment_label_no_file_chosen: { message: 'No file chosen.' },
     skyux_file_attachment_required: { message: 'Required' },