Styles for error state and test for max file size

src/components/ImageFileUpload/ImageFileUpload.mdx

@@ -1,5 +1,5 @@
 import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
-import { Default } from './ImageFileUpload.stories';
+import { Default, FileSizeError } from './ImageFileUpload.stories';
 
 # Image File Upload
 
@@ -16,6 +16,12 @@ will be obscured by the choose button.
 
 <Canvas of={Default} layout={'padded'} />
 
+## Max File Size Error
+
+Choose any image file larger than 1 byte to see the error state when the file size exceeds the configured `maxFileSize`.
+
+<Canvas of={FileSizeError} layout={'padded'} />
+
 ## Props
 
 <ArgTypes story={PRIMARY_STORY} />

src/components/ImageFileUpload/ImageFileUpload.stories.ts

@@ -21,3 +21,10 @@ export const Default: Story = {
     name: 'demo'
   }
 };
+
+export const FileSizeError: Story = {
+  args: {
+    name: 'demo-filesize-error',
+    maxFileSize: 1
+  }
+};

src/components/ImageFileUpload/ImageFileUpload.vue

@@ -13,7 +13,8 @@
             {
               'uic-img-upload--basic': props.mode === 'basic',
               'uic-img-upload--advanced': props.mode === 'advanced',
-              'uic-img-upload--preview': state.files?.length > 0
+              'uic-img-upload--preview': state.files?.length > 0,
+              'uic-img-upload--with-messages': state.messages?.length > 0
             }
           ]
         };
@@ -108,6 +109,27 @@
         return {
           class: ['uic-img-upload__file']
         };
+      },
+      message: function () {
+        return {
+          root(
+            _: MessagePassThroughMethodOptions<FileUploadPassThroughMethodOptions>
+          ) {
+            return {
+              class: ['uic-img-upload__message']
+            };
+          },
+          icon() {
+            return {
+              class: ['uic-img-upload__message-icon']
+            };
+          },
+          closeButton() {
+            return {
+              class: ['uic-img-upload__message-close-btn']
+            };
+          }
+        };
       }
     }"
     @select="($event) => onSelectFile($event)"
@@ -128,6 +150,8 @@
 import FileUpload, { FileUploadSelectEvent } from 'primevue/fileupload';
 // eslint-disable-next-line no-unused-vars
 import type { FileUploadPassThroughMethodOptions } from 'primevue/fileupload';
+// eslint-disable-next-line no-unused-vars
+import type { MessagePassThroughMethodOptions } from 'primevue/message';
 
 export interface ImageFileUploadProps {
   /**
@@ -160,7 +184,7 @@ export interface ImageFileUploadProps {
 
 export interface FileSelectedEvent {
   originalEvent: Event;
-  file: File;
+  file?: File;
 }
 
 /* eslint-disable no-unused-vars */
@@ -171,7 +195,7 @@ export interface ImageFileEmits {
    * | Event Property  | Type    | Description |
    * | --------------- | ------- | ----------- |
    * | originalEvent   | Event   | The original event. |
-   * | file             | File    | The selected file. |
+   * | file             | File / `undefined`     | The selected file or `undefined` if the selected file exceeds the maxFileSize or is an invalid file type. |
    *
    * @event fileSelected
    */
@@ -218,6 +242,16 @@ function onSelectFile($event: FileUploadSelectEvent) {
     }
   }
 
+  &--with-messages {
+    #{$root}__choose-btn {
+      @apply hidden;
+    }
+
+    #{$root}__content {
+      @apply flex flex-col items-center;
+    }
+  }
+
   & > input[type='file'] {
     @apply hidden;
   }
@@ -277,5 +311,17 @@ function onSelectFile($event: FileUploadSelectEvent) {
   &__badge {
     @apply hidden;
   }
+
+  &__message {
+    @apply flex justify-center w-full;
+
+    & > div {
+      @apply flex flex-row-reverse gap-2;
+    }
+
+    #{$root}__message-icon {
+      @apply my-auto text-red-500;
+    }
+  }
 }
 </style>

src/components/ImageFileUpload/__tests__/ImageFileUpload.spec.ts

@@ -135,6 +135,34 @@ describe('ImageFileUpload', () => {
     });
   });
 
+  it('should display an error when the file size exceeds the maxFileSize prop', async () => {
+    const { baseElement, getByRole, container, emitted } = renderComponent({
+      props: { ...initialProps, maxFileSize: 1 }
+    });
+
+    const fileInput = container.querySelector('input[type="file"]');
+
+    expect(fileInput).toBeInTheDocument();
+
+    const file = new File(['(⌐□_□)'], 'chucknorris.png', {
+      type: 'image/png'
+    });
+
+    userEvent.upload(fileInput as HTMLElement, file);
+
+    await waitFor(() => {
+      const error = getByRole('alert');
+      expect(error).toBeInTheDocument();
+      expect(error).toHaveTextContent(
+        'Invalid file size, file size should be smaller than 1 B'
+      );
+      expect(emitted()).toHaveProperty('fileSelected');
+      const [fileSelectedEvent] = emitted().fileSelected as [FileSelectedEvent];
+      expect(fileSelectedEvent.file).toBeUndefined();
+      expect(baseElement).toMatchSnapshot();
+    });
+  });
+
   it('should emit the fileSelected event when a file is selected', async () => {
     const { container, emitted } = renderComponent({ props: initialProps });