@availity/mui-file-selector 1.7.1 → 1.8.1

package/dist/index.mjs

@@ -114,6 +114,66 @@ var FilePickerBtn = (_a) => {
   ] });
 };
 
+// src/lib/util.ts
+import {
+  FileArchiveIcon,
+  FileCodeIcon,
+  FileCsvIcon,
+  FileExcelIcon,
+  FileIcon,
+  FileImageIcon,
+  FileLinesIcon,
+  FilePdfIcon,
+  FilePowerpointIcon,
+  FileWordIcon
+} from "@availity/mui-icon";
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+var FILE_EXT_ICONS = {
+  png: FileImageIcon,
+  jpg: FileImageIcon,
+  jpeg: FileImageIcon,
+  gif: FileImageIcon,
+  csv: FileCsvIcon,
+  ppt: FilePowerpointIcon,
+  pptx: FilePowerpointIcon,
+  xls: FileExcelIcon,
+  xlsx: FileExcelIcon,
+  doc: FileWordIcon,
+  docx: FileWordIcon,
+  txt: FileLinesIcon,
+  text: FileLinesIcon,
+  zip: FileArchiveIcon,
+  "7zip": FileArchiveIcon,
+  xml: FileCodeIcon,
+  html: FileCodeIcon,
+  pdf: FilePdfIcon
+};
+var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
+var getFileExtension = (fileName) => {
+  var _a;
+  return ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+};
+var getFileExtIcon = (fileName) => {
+  const ext = getFileExtension(fileName);
+  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
+};
+var dedupeErrors = (errors) => {
+  const dedupedErrors = errors.reduce((acc, error) => {
+    if (!acc.find((err) => err.code === error.code)) {
+      acc.push(error);
+    }
+    return acc;
+  }, []);
+  return dedupedErrors;
+};
+
 // src/lib/Dropzone.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var outerBoxStyles = {
@@ -149,10 +209,12 @@ var DropzoneContainer = styled(Box, { name: "AvDropzoneContainer", slot: "root"
 });
 var Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -182,6 +244,27 @@ var Dropzone = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`
         });
       }
+      if (allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf("."));
+        const regExp = new RegExp(`([^${allowedFileNameCharacters}])`, "g");
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: "invalid-file-name-characters",
+            message: "File name contains characters not allowed"
+          });
+        }
+      }
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: "file-invalid-type",
+            message: `File type ${fileExt} is not allowed`
+          });
+        }
+      }
       if (validator) {
         const validatorErrors = validator(file);
         if (validatorErrors) {
@@ -194,7 +277,7 @@ var Dropzone = ({
       }
       return errors.length > 0 ? errors : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, allowedFileNameCharacters, watch, name, allowedFileTypes]
   );
   const handleOnDrop = useCallback(
     (acceptedFiles, fileRejections, event) => {
@@ -205,7 +288,48 @@ var Dropzone = ({
       }
       setTotalSize((prev) => prev + newSize);
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
-      setValue(name, previous.concat(acceptedFiles));
+      if (maxTotalSize) {
+        const currentTotalSize = previous.reduce((sum, file) => sum + file.size, 0);
+        let newSize2 = 0;
+        const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
+        let sizeCounter = 0;
+        const cutoffIndex = acceptedFiles.findIndex((file) => {
+          sizeCounter += file.size;
+          return sizeCounter > availableSize;
+        });
+        if (cutoffIndex !== -1) {
+          const filesToAdd2 = acceptedFiles.slice(0, cutoffIndex === 0 ? 0 : cutoffIndex);
+          fileRejections.push({
+            file: acceptedFiles[cutoffIndex],
+            errors: [
+              {
+                code: "upload-too-large",
+                message: `Total upload size exceeds the limit of ${formatBytes(maxTotalSize)}.`
+              }
+            ],
+            id: counter.increment()
+          });
+          acceptedFiles = filesToAdd2;
+        }
+        newSize2 = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
+        setTotalSize((prev) => prev + newSize2);
+      }
+      const remainingSlots = maxFiles ? Math.max(0, maxFiles - previous.length) : acceptedFiles.length;
+      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
+      setValue(name, previous.concat(filesToAdd));
+      if (maxFiles && acceptedFiles.length > remainingSlots) {
+        fileRejections.push({
+          file: acceptedFiles[remainingSlots],
+          // Use the first excess file
+          errors: [
+            {
+              code: "too-many-files",
+              message: `Too many files. You may only upload ${maxFiles} file(s).`
+            }
+          ],
+          id: counter.increment()
+        });
+      }
       if (fileRejections.length > 0) {
         const TOO_MANY_FILES_CODE = "too-many-files";
         let hasTooManyFiles = false;
@@ -232,7 +356,7 @@ var Dropzone = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, setValue, onDrop]
   );
   const accept = allowedFileTypes.join(",");
   const { getRootProps, getInputProps } = useDropzone({
@@ -257,7 +381,7 @@ var Dropzone = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
@@ -306,68 +430,6 @@ import { CloudUploadIcon as CloudUploadIcon2, PlusIcon as PlusIcon2 } from "@ava
 import { Box as Box2, Stack as Stack2 } from "@availity/mui-layout";
 import { Typography as Typography2 } from "@availity/mui-typography";
 import Upload from "@availity/upload-core";
-
-// src/lib/util.ts
-import {
-  FileArchiveIcon,
-  FileCodeIcon,
-  FileCsvIcon,
-  FileExcelIcon,
-  FileIcon,
-  FileImageIcon,
-  FileLinesIcon,
-  FilePdfIcon,
-  FilePowerpointIcon,
-  FileWordIcon
-} from "@availity/mui-icon";
-function formatBytes(bytes, decimals = 2) {
-  if (!+bytes) return "0 Bytes";
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-var FILE_EXT_ICONS = {
-  png: FileImageIcon,
-  jpg: FileImageIcon,
-  jpeg: FileImageIcon,
-  gif: FileImageIcon,
-  csv: FileCsvIcon,
-  ppt: FilePowerpointIcon,
-  pptx: FilePowerpointIcon,
-  xls: FileExcelIcon,
-  xlsx: FileExcelIcon,
-  doc: FileWordIcon,
-  docx: FileWordIcon,
-  txt: FileLinesIcon,
-  text: FileLinesIcon,
-  zip: FileArchiveIcon,
-  "7zip": FileArchiveIcon,
-  xml: FileCodeIcon,
-  html: FileCodeIcon,
-  pdf: FilePdfIcon
-};
-var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
-var getFileExtension = (fileName) => {
-  var _a;
-  return ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-};
-var getFileExtIcon = (fileName) => {
-  const ext = getFileExtension(fileName);
-  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
-};
-var dedupeErrors = (errors) => {
-  const dedupedErrors = errors.reduce((acc, error) => {
-    if (!acc.find((err) => err.code === error.code)) {
-      acc.push(error);
-    }
-    return acc;
-  }, []);
-  return dedupedErrors;
-};
-
-// src/lib/Dropzone2.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var counter2 = createCounter();
 function startUpload(file, options) {
@@ -389,6 +451,7 @@ var Dropzone2 = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -420,6 +483,27 @@ var Dropzone2 = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`
         });
       }
+      if (uploadOptions.allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf("."));
+        const regExp = new RegExp(`([^${uploadOptions.allowedFileNameCharacters}])`, "g");
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: "invalid-file-name-characters",
+            message: "File name contains characters not allowed"
+          });
+        }
+      }
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+        const lowerCaseAllowedTypes = allowedFileTypes.map((type) => type.toLowerCase());
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: "file-invalid-type",
+            message: `File type ${fileExt} is not allowed`
+          });
+        }
+      }
       if (validator) {
         const validatorErrors = validator(file);
         if (validatorErrors) {
@@ -432,7 +516,7 @@ var Dropzone2 = ({
       }
       return errors.length > 0 ? dedupeErrors(errors) : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
   const handleOnDrop = useCallback2(
     (acceptedFiles, fileRejections, event) => __async(void 0, null, function* () {
@@ -443,8 +527,49 @@ var Dropzone2 = ({
       }
       setTotalSize((prev) => prev + newSize);
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
-      const uploads = acceptedFiles.map((file) => startUpload(file, uploadOptions));
+      if (maxTotalSize) {
+        const currentTotalSize = previous.reduce((sum, upload) => sum + upload.file.size, 0);
+        let newSize2 = 0;
+        const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
+        let sizeCounter = 0;
+        const cutoffIndex = acceptedFiles.findIndex((file) => {
+          sizeCounter += file.size;
+          return sizeCounter > availableSize;
+        });
+        if (cutoffIndex !== -1) {
+          const filesToAdd2 = acceptedFiles.slice(0, cutoffIndex === 0 ? 0 : cutoffIndex);
+          fileRejections.push({
+            file: acceptedFiles[cutoffIndex],
+            errors: [
+              {
+                code: "upload-too-large",
+                message: `Total upload size exceeds the limit of ${formatBytes(maxTotalSize)}.`
+              }
+            ],
+            id: counter2.increment()
+          });
+          acceptedFiles = filesToAdd2;
+        }
+        newSize2 = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
+        setTotalSize((prev) => prev + newSize2);
+      }
+      const remainingSlots = maxFiles ? Math.max(0, maxFiles - previous.length) : acceptedFiles.length;
+      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
+      const uploads = filesToAdd.map((file) => startUpload(file, uploadOptions));
       setValue(name, previous.concat(yield Promise.all(uploads)));
+      if (maxFiles && acceptedFiles.length > remainingSlots) {
+        fileRejections.push({
+          file: acceptedFiles[remainingSlots],
+          // Use the first excess file
+          errors: [
+            {
+              code: "too-many-files",
+              message: `Too many files. You may only upload ${maxFiles} file(s).`
+            }
+          ],
+          id: counter2.increment()
+        });
+      }
       if (fileRejections.length > 0) {
         const TOO_MANY_FILES_CODE = "too-many-files";
         let hasTooManyFiles = false;
@@ -471,7 +596,7 @@ var Dropzone2 = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     }),
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, uploadOptions, setValue, onDrop]
   );
   const { getRootProps, getInputProps } = useDropzone2({
     onDrop: handleOnDrop,
@@ -495,7 +620,7 @@ var Dropzone2 = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
@@ -541,6 +666,7 @@ import { List, ListItem } from "@availity/mui-list";
 import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var codes = {
   "file-too-large": "File exceeds maximum size",
+  "upload-too-large": "File causes maximum total upload size to be exceeded",
   "file-invalid-type": "File has an invalid type",
   "file-too-small": "File is smaller than minimum size",
   "too-many-file": "Too many files",
@@ -1052,14 +1178,18 @@ import { jsxs as jsxs11 } from "react/jsx-runtime";
 var FileTypesMessage = ({
   allowedFileTypes = [],
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   maxFileSize,
+  maxTotalSize,
   variant = "caption"
 }) => {
   const fileSizeMsg = customSizeMessage || (typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null);
+  const totalFileSizeMsg = customTotalSizeMessage || (typeof maxTotalSize === "number" ? `Maximum total upload size is ${formatBytes(maxTotalSize)}. ` : null);
   const fileTypesMsg = customTypesMessage || (allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.");
   return /* @__PURE__ */ jsxs11(Typography4, { variant, children: [
     fileSizeMsg,
+    totalFileSizeMsg,
     fileTypesMsg
   ] });
 };
@@ -1067,12 +1197,14 @@ var FileTypesMessage = ({
 // src/lib/HeaderMessage.tsx
 import { Typography as Typography5 } from "@availity/mui-typography";
 import { jsxs as jsxs12 } from "react/jsx-runtime";
-var HeaderMessage = ({ maxFiles, maxSize }) => {
+var HeaderMessage = ({ maxFiles, maxSize, maxTotalSize }) => {
   return /* @__PURE__ */ jsxs12(Typography5, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
-    formatBytes(maxSize)
+    formatBytes(maxSize),
+    " ",
+    maxTotalSize && `and a maximum total size of ${formatBytes(maxTotalSize)}`
   ] });
 };
 
@@ -1087,6 +1219,7 @@ var FileSelector = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1097,6 +1230,7 @@ var FileSelector = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1156,10 +1290,12 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1173,7 +1309,9 @@ var FileSelector = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1181,11 +1319,12 @@ var FileSelector = ({
       children
     ] }) : /* @__PURE__ */ jsxs13(Grid4, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs13(Grid4, { children: [
-        /* @__PURE__ */ jsx14(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx14(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ jsx14(
           FileTypesMessage,
           {
             allowedFileTypes,
+            customTotalSizeMessage,
             customSizeMessage,
             customTypesMessage,
             variant: "body2"
@@ -1198,10 +1337,12 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1263,6 +1404,7 @@ var FileSelector2 = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1273,6 +1415,7 @@ var FileSelector2 = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1333,6 +1476,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1347,7 +1491,9 @@ var FileSelector2 = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1355,12 +1501,13 @@ var FileSelector2 = ({
       children
     ] }) : /* @__PURE__ */ jsxs14(Grid5, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs14(Grid5, { children: [
-        /* @__PURE__ */ jsx15(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx15(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ jsx15(
           FileTypesMessage,
           {
             allowedFileTypes,
             customSizeMessage,
+            customTotalSizeMessage,
             customTypesMessage,
             variant: "body2"
           }
@@ -1376,6 +1523,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Dropzone.tsx

@@ -11,6 +11,7 @@ import { Box, Stack } from '@availity/mui-layout';
 import { Typography } from '@availity/mui-typography';
 
 import { FilePickerBtn } from './FilePickerBtn';
+import { formatBytes } from './util';
 
 export const outerBoxStyles = {
   backgroundColor: 'background.secondary',
@@ -50,6 +51,11 @@ export type DropzoneProps = {
    * List of allowed file extensions (e.g. ['.pdf', '.doc']). Each extension must start with a dot
    */
   allowedFileTypes?: `.${string}`[];
+  /**
+   * Regular expression pattern of allowed characters in file names
+   * @example "a-zA-Z0-9-_."
+   */
+  allowedFileNameCharacters?: string;
   /**
    * Whether the dropzone is disabled
    */
@@ -66,6 +72,10 @@ export type DropzoneProps = {
    * Maximum size of each file in bytes
    */
   maxSize?: number;
+  /**
+   * Maximum size of total upload in bytes
+   */
+  maxTotalSize?: number;
   /**
    * Whether multiple file selection is allowed
    */
@@ -106,10 +116,12 @@ export const DropzoneContainer = styled(Box, { name: 'AvDropzoneContainer', slot
 
 export const Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -141,6 +153,35 @@ export const Dropzone = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`,
         });
       }
+      
+      // Check for allowed file name characters
+      if (allowedFileNameCharacters) {
+        const fileName = file.name.substring(0, file.name.lastIndexOf('.'));
+        const regExp = new RegExp(`([^${allowedFileNameCharacters}])`, 'g');
+        
+        if (fileName.match(regExp) !== null) {
+          errors.push({
+            code: 'invalid-file-name-characters',
+            message: 'File name contains characters not allowed',
+          });
+        }
+      }
+      
+      // Explicit check for allowed file types
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+        
+        // Convert all file types to lowercase for comparison
+        const lowerCaseAllowedTypes = allowedFileTypes.map(type => type.toLowerCase());
+        
+        if (!lowerCaseAllowedTypes.includes(fileExt)) {
+          errors.push({
+            code: 'file-invalid-type',
+            message: `File type ${fileExt} is not allowed`,
+          });
+        }
+      }
 
       if (validator) {
         const validatorErrors = validator(file);
@@ -155,7 +196,7 @@ export const Dropzone = ({
 
       return errors.length > 0 ? errors : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, allowedFileNameCharacters, watch, name, allowedFileTypes]
   );
 
   const handleOnDrop = useCallback(
@@ -169,8 +210,64 @@ export const Dropzone = ({
 
       const previous = watch(name) ?? [];
 
+      if (maxTotalSize) {
+        // Calculate current total size
+        const currentTotalSize = previous.reduce((sum: number, file: File) => sum + file.size, 0);
+        let newSize = 0;
+
+        const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
+        let sizeCounter = 0;
+
+        // Find the index where we exceed the total size limit
+        const cutoffIndex = acceptedFiles.findIndex((file) => {
+          sizeCounter += file.size;
+          return sizeCounter > availableSize;
+        });
+
+        // If we found files that exceed the limit
+        if (cutoffIndex !== -1) {
+          // Files that fit within the size limit
+          const filesToAdd = acceptedFiles.slice(0, cutoffIndex === 0 ? 0 : cutoffIndex);
+
+          // Create rejection for excess files
+          fileRejections.push({
+            file: acceptedFiles[cutoffIndex],
+            errors: [
+              {
+                code: 'upload-too-large',
+                message: `Total upload size exceeds the limit of ${formatBytes(maxTotalSize)}.`,
+              },
+            ],
+            id: counter.increment(),
+          });
+
+          // Update acceptedFiles to only include files that fit
+          acceptedFiles = filesToAdd;
+        }
+
+        // Calculate size of accepted files for the state update
+        newSize = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
+        setTotalSize((prev) => prev + newSize);
+      }
+
       // Set accepted files to form context
-      setValue(name, previous.concat(acceptedFiles));
+      const remainingSlots = maxFiles ? Math.max(0, maxFiles - previous.length) : acceptedFiles.length;
+      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
+      setValue(name, previous.concat(filesToAdd));
+
+      // Add rejections for excess files if needed
+      if (maxFiles && acceptedFiles.length > remainingSlots) {
+        fileRejections.push({
+          file: acceptedFiles[remainingSlots], // Use the first excess file
+          errors: [
+            {
+              code: 'too-many-files',
+              message: `Too many files. You may only upload ${maxFiles} file(s).`,
+            },
+          ],
+          id: counter.increment(),
+        });
+      }
 
       if (fileRejections.length > 0) {
         const TOO_MANY_FILES_CODE = 'too-many-files';
@@ -206,7 +303,7 @@ export const Dropzone = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, setValue, onDrop]
   );
 
   const accept = allowedFileTypes.join(',');
@@ -239,7 +336,7 @@ export const Dropzone = ({
 
   const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
 
   const getFieldValue = () => {