#153 - Restricting DragZoneFiled File Upload to a Single File

libs/formik-elements/src/DragZoneField.tsx

@@ -26,6 +26,13 @@ export type DragZoneFieldProps<T extends File> = {
    * The accessor value for the component (for validation, fetching, etc.).
    */
   name: string;
+
+  /**
+   * Controls whether the file upload is restricted to a single file.
+   * If set to true, only one file can be uploaded at a time.
+   * @default false
+   */
+  singleFileUpload?: boolean;
 } & DragZoneProps<T>;
 
 export default function DragZoneField<T extends File>({ name, ...props }: DragZoneFieldProps<T>) {
@@ -40,7 +47,9 @@ export default function DragZoneField<T extends File>({ name, ...props }: DragZo
   React.useEffect(() => {
     props.hook.onUpdateCallback((added, deleted) => {
       if (added) {
-        helpers.setValue([...(fieldValue.current || []), ...(Array.isArray(added) ? added : [added])]);
+        const addedFiles = Array.isArray(added) ? added : [added];
+        const updatedFiles = props.singleFileUpload ? addedFiles : [...(fieldValue.current || []), ...addedFiles];
+        helpers.setValue(updatedFiles);
       } else if (deleted) {
         helpers.setValue(
           (fieldValue.current || []).filter((id) => (Array.isArray(deleted) ? !deleted.includes(id) : id !== deleted))

libs/formik-elements/src/UploadButtonField.tsx

@@ -26,6 +26,13 @@ export type UploadButtonFieldProps<T extends File> = {
    * The accessor value for the component (for validation, fetching, etc.).
    */
   name: string;
+
+  /**
+   * Controls whether the file upload is restricted to a single file.
+   * If set to true, only one file can be uploaded at a time.
+   * @default false
+   */
+  singleFileUpload?: boolean;
 } & UploadButtonProps<T>;
 
 export default function UploadButtonField<T extends File>({ name, ...props }: UploadButtonFieldProps<T>) {
@@ -40,7 +47,9 @@ export default function UploadButtonField<T extends File>({ name, ...props }: Up
   React.useEffect(() => {
     props.hook.onUpdateCallback((added, deleted) => {
       if (added) {
-        helpers.setValue([...(fieldValue.current || []), ...(Array.isArray(added) ? added : [added])]);
+        const addedFiles = Array.isArray(added) ? added : [added];
+        const updatedFiles = props.singleFileUpload ? addedFiles : [...(fieldValue.current || []), ...addedFiles];
+        helpers.setValue(updatedFiles);
       } else if (deleted) {
         helpers.setValue(
           (fieldValue.current || []).filter((id) => (Array.isArray(deleted) ? deleted.includes(id) : id !== deleted))

storybook/src/formik-elements/DragZoneField.stories.tsx

@@ -144,6 +144,21 @@ export const AndFileList = () => {
   );
 };
 
+export const WithSingleFileUpload = () => {
+  const useFileUploadHook = useFileUpload();
+
+  return (
+      <DragZoneField
+          name={name}
+          hook={useFileUploadHook}
+          url={useMockSender.destination.url}
+          send={useMockSender.send}
+          title={<Intl name="dragZoneTitle" />}
+          singleFileUpload={true}
+      />
+  );
+};
+
 export const WithLabel = () => {
   const useFileUploadHook = useFileUpload();
 

storybook/src/formik-elements/UploadButtonField.stories.tsx

@@ -73,3 +73,12 @@ export const Example = () => {
     </UploadButtonField>
   );
 };
+
+export const WithSingleFileUpload = () => {
+  const file = useFileUpload();
+  return (
+      <UploadButtonField hook={file} name={name} url={useMockSender.destination.url} send={useMockSender.send} singleFileUpload={true}>
+        Upload
+      </UploadButtonField>
+  );
+};