@availity/mui-file-selector 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.9.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.8.1...@availity/mui-file-selector@1.9.0) (2025-09-24)
+
+
+### Features
+
+* **mui-file-selector:** disable FilePickerBtn when max files is reached ([06f1764](https://github.com/Availity/element/commit/06f176448192e89088e760c762b37b469ac39e95))
+
+## [1.8.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.8.0...@availity/mui-file-selector@1.8.1) (2025-06-16)
+
+
+### Bug Fixes
+
+* **mui-file-selector:** ensure allowedFileTypes and allowedFileNameCharacters validation ([bb0f3ea](https://github.com/Availity/element/commit/bb0f3eaa1dcab2e82f5037f534e959321366701a))
+
 ## [1.8.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.7.1...@availity/mui-file-selector@1.8.0) (2025-06-16)
 
 

package/dist/index.d.mts

@@ -38,6 +38,11 @@ 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
      */
@@ -92,7 +97,7 @@ type DropzoneProps = {
     validator?: (file: File) => FileError | FileError[] | null;
 };
 declare const DropzoneContainer: typeof MuiBox;
-declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+declare const Dropzone: ({ allowedFileTypes, allowedFileNameCharacters, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
 type Dropzone2Props = DropzoneProps & {
     uploadOptions: UploadOptions;

package/dist/index.d.ts

@@ -38,6 +38,11 @@ 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
      */
@@ -92,7 +97,7 @@ type DropzoneProps = {
     validator?: (file: File) => FileError | FileError[] | null;
 };
 declare const DropzoneContainer: typeof MuiBox;
-declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+declare const Dropzone: ({ allowedFileTypes, allowedFileNameCharacters, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
 type Dropzone2Props = DropzoneProps & {
     uploadOptions: UploadOptions;

package/dist/index.js

@@ -250,6 +250,7 @@ var DropzoneContainer = (0, import_styles.styled)(import_mui_layout.Box, { name:
 });
 var Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
@@ -284,6 +285,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) {
@@ -296,7 +318,7 @@ var Dropzone = ({
       }
       return errors.length > 0 ? errors : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, allowedFileNameCharacters, watch, name, allowedFileTypes]
   );
   const handleOnDrop = (0, import_react.useCallback)(
     (acceptedFiles, fileRejections, event) => {
@@ -375,7 +397,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 } = (0, import_react_dropzone.useDropzone)({
@@ -400,13 +422,18 @@ var Dropzone = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
@@ -502,6 +529,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) {
@@ -514,10 +562,10 @@ var Dropzone2 = ({
       }
       return errors.length > 0 ? dedupeErrors(errors) : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
   const handleOnDrop = (0, import_react2.useCallback)(
-    (acceptedFiles, fileRejections, event) => __async(void 0, null, function* () {
+    (acceptedFiles, fileRejections, event) => __async(null, null, function* () {
       var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
@@ -527,7 +575,6 @@ var Dropzone2 = ({
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
       if (maxTotalSize) {
         const currentTotalSize = previous.reduce((sum, upload) => sum + upload.file.size, 0);
-        console.log({ previous });
         let newSize2 = 0;
         const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
         let sizeCounter = 0;
@@ -595,7 +642,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 } = (0, import_react_dropzone2.useDropzone)({
     onDrop: handleOnDrop,
@@ -619,13 +666,18 @@ var Dropzone2 = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_layout2.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_layout2.Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_icon3.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_typography2.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
@@ -1283,6 +1335,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
@@ -1329,6 +1382,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,

package/dist/index.mjs

@@ -209,6 +209,7 @@ var DropzoneContainer = styled(Box, { name: "AvDropzoneContainer", slot: "root"
 });
 var Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
@@ -243,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) {
@@ -255,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) => {
@@ -334,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({
@@ -359,13 +381,18 @@ var Dropzone = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ jsx2(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ jsx2(Box, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx2(Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2(CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ jsx2(Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
@@ -461,6 +488,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) {
@@ -473,10 +521,10 @@ 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* () {
+    (acceptedFiles, fileRejections, event) => __async(null, null, function* () {
       var _a2;
       let newSize = 0;
       for (const file of acceptedFiles) {
@@ -486,7 +534,6 @@ var Dropzone2 = ({
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
       if (maxTotalSize) {
         const currentTotalSize = previous.reduce((sum, upload) => sum + upload.file.size, 0);
-        console.log({ previous });
         let newSize2 = 0;
         const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
         let sizeCounter = 0;
@@ -554,7 +601,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,
@@ -578,13 +625,18 @@ var Dropzone2 = ({
   };
   const handleOnClick = (event) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
   const getFieldValue = () => {
     const field = getValues();
     return field[name] || [];
   };
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+  const hasFiles = currentFileCount > 0;
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
   return enableDropArea ? /* @__PURE__ */ jsx3(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ jsx3(Box2, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx3(Stack2, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsx3(CloudUploadIcon2, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ jsx3(Typography2, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
@@ -1248,6 +1300,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
@@ -1294,6 +1347,7 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,

package/package.json

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

package/src/lib/Dropzone.tsx

@@ -51,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
    */
@@ -111,6 +116,7 @@ export const DropzoneContainer = styled(Box, { name: 'AvDropzoneContainer', slot
 
 export const Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
@@ -148,6 +154,35 @@ export const Dropzone = ({
         });
       }
 
+      // 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);
         if (validatorErrors) {
@@ -161,7 +196,7 @@ export const Dropzone = ({
 
       return errors.length > 0 ? errors : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, allowedFileNameCharacters, watch, name, allowedFileTypes]
   );
 
   const handleOnDrop = useCallback(
@@ -268,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(',');
@@ -301,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 = () => {
@@ -309,7 +344,15 @@ export const Dropzone = ({
     return field[name] || [];
   };
 
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+
+  const hasFiles = currentFileCount > 0;
+
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
 
   return enableDropArea ? (
     <DropzoneContainer sx={outerBoxStyles} {...rootProps}>

package/src/lib/Dropzone2.tsx

@@ -95,6 +95,35 @@ export const Dropzone2 = ({
         });
       }
 
+      // Check for allowed file name characters
+      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',
+          });
+        }
+      }
+
+      // 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);
         if (validatorErrors) {
@@ -108,7 +137,7 @@ export const Dropzone2 = ({
 
       return errors.length > 0 ? dedupeErrors(errors) : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
 
   const handleOnDrop = useCallback(
@@ -125,7 +154,6 @@ export const Dropzone2 = ({
       if (maxTotalSize) {
         // Calculate current total size
         const currentTotalSize = previous.reduce((sum: number, upload: Upload) => sum + upload.file.size, 0);
-        console.log({ previous });
         let newSize = 0;
 
         const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
@@ -217,7 +245,7 @@ export const Dropzone2 = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, uploadOptions, setValue, onDrop]
   );
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -248,7 +276,7 @@ export const Dropzone2 = ({
 
   const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
 
   const getFieldValue = () => {
@@ -256,7 +284,15 @@ export const Dropzone2 = ({
     return field[name] || [];
   };
 
-  const hasFiles = getFieldValue().length > 0;
+  const currentFileCount = getFieldValue().length;
+
+  const hasFiles = currentFileCount > 0;
+
+  const isMaxFilesReached = maxFiles && currentFileCount >= maxFiles;
+
+  if (isMaxFilesReached) {
+    disabled = true;
+  }
 
   return enableDropArea ? (
     <DropzoneContainer sx={outerBoxStyles} {...rootProps}>

package/src/lib/FileSelector.tsx

@@ -249,6 +249,7 @@ export const FileSelector = ({
           <Dropzone
             name={name}
             allowedFileTypes={allowedFileTypes}
+            allowedFileNameCharacters={allowedFileNameCharacters}
             disabled={disabled}
             enableDropArea={enableDropArea}
             maxFiles={maxFiles}
@@ -289,6 +290,7 @@ export const FileSelector = ({
             <Dropzone
               name={name}
               allowedFileTypes={allowedFileTypes}
+              allowedFileNameCharacters={allowedFileNameCharacters}
               disabled={disabled}
               enableDropArea={enableDropArea}
               maxFiles={maxFiles}