FEAT: Preload files on FileInput (#1092)

#962
nl-design-system · Jan 9, 2025 · 41de878 · 41de878
1 parent 5166df2
commit 41de878
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/packages/components-react/src/FileInput.tsx b/packages/components-react/src/FileInput.tsx
@@ -1,17 +1,18 @@
 import { Paragraph } from '@utrecht/component-library-react';
-import { ChangeEvent, PropsWithChildren, RefObject, useState } from 'react';
+import { ChangeEvent, PropsWithChildren, RefObject, useEffect, useState } from 'react';
 import { Button, ButtonProps } from './Button';
 import { File } from './File';
 
 export interface FileInputProps extends Omit<ButtonProps, 'appearance'> {
-  ref: RefObject<HTMLInputElement>;
+  ref?: RefObject<HTMLInputElement>;
   buttonText: string;
   buttonAppearance?: ButtonProps['appearance'];
   maxFileSizeInBytes: number;
   allowedFileTypes: string;
   fileSizeErrorMessage: string;
   fileTypeErrorMessage: string;
   onValueChange?: (callbackFiles: File[]) => void; // eslint-disable-line no-unused-vars
+  defaultFiles?: File[];
 }
 
 export const FileInput = ({
@@ -24,6 +25,7 @@ export const FileInput = ({
   fileSizeErrorMessage,
   fileTypeErrorMessage,
   onValueChange,
+  defaultFiles,
 }: PropsWithChildren<FileInputProps>) => {
   const [files, setFiles] = useState<File[]>([]);
   const inputElement = ref;
@@ -37,6 +39,12 @@ export const FileInput = ({
     }
   };
 
+  useEffect(() => {
+    if (defaultFiles) {
+      setFiles(defaultFiles);
+    }
+  }, [defaultFiles]);
+
   return (
     <div className="rhc-file-input" ref={ref}>
       {children}
@@ -53,7 +61,7 @@ export const FileInput = ({
       <div className="rhc-file-input__button-feedback-container">
         <Button
           appearance={buttonAppearance ?? 'secondary-action-button'}
-          onClick={() => inputElement.current && inputElement.current.click()}
+          onClick={() => inputElement?.current.click()}
         >
           {buttonText}
         </Button>

diff --git a/packages/storybook/src/community/file-input.stories.tsx b/packages/storybook/src/community/file-input.stories.tsx
@@ -26,6 +26,9 @@ const meta = {
     // TODO: add Figma, GitHub and NL DesignSystem links
     componentOrigin: 'Dit component is volledig ontwikkeld door de Rijkshuisstijl Community.',
   },
+  args: {
+    ref: undefined,
+  },
 } satisfies Meta<typeof FileInput>;
 
 export default meta;
@@ -64,3 +67,21 @@ export const MetCustomElementenLijst: Story = {
     fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.',
   },
 };
+
+export const DefaultFiles: Story = {
+  args: {
+    buttonText: 'Bestanden kiezen',
+    maxFileSizeInBytes: 10_485_760,
+    allowedFileTypes: '.doc,.docx,.xlsx,.pdf,.zip,.jpg,.png,.bmp,.gif',
+    fileSizeErrorMessage: 'Dit bestand is groter dan 10 MB.',
+    fileTypeErrorMessage: 'Dit bestandstype wordt niet toegestaan.',
+    defaultFiles: [
+      new File(['Example content for PDF file'], 'example.pdf', {
+        type: 'application/pdf',
+      }),
+      new File(['Example content for a text file'], 'example.txt', {
+        type: 'text/plain',
+      }),
+    ],
+  },
+};