@availity/mui-file-selector 1.5.3 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.6.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.5.3...@availity/mui-file-selector@1.6.0) (2025-04-15)
+
+
+### Features
+
+* **mui-file-selector:** allow customSizeMessage and customTypesMessage ([378ccc0](https://github.com/Availity/element/commit/378ccc05fac7bc0e9086aafd4ad9aa9fdd5026de))
+
 ## [1.5.3](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.5.2...@availity/mui-file-selector@1.5.3) (2025-04-14)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -83,6 +83,7 @@ type ErrorAlertProps = {
     id: number;
     onClose: () => void;
 };
+declare const formatFileTooLarge: (message: string) => string;
 declare const ErrorAlert: ({ errors, fileName, id, onClose }: ErrorAlertProps) => react_jsx_runtime.JSX.Element | null;
 
 type Options = {
@@ -197,6 +198,14 @@ type FileSelectorProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Overrides the standard file size message
+     */
+    customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard file types message
+     */
+    customTypesMessage?: React.ReactNode;
     /**
      * Whether to enable the dropzone area
      */
@@ -206,7 +215,7 @@ type FileSelectorProps = {
      */
     endpoint?: string;
     /**
-     * Componet to render the File information. This should return a `ListItem`
+     * Component to render the File information. This should return a `ListItem`
      */
     customFileRow?: React.ElementType<{
         upload?: Upload;
@@ -272,20 +281,28 @@ type FileSelectorProps = {
      */
     disableRemove?: boolean;
 };
-declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
+declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
 type FileTypesMessageProps = {
     /**
      * Allowed file type extensions. Each extension should be prefixed with a ".". eg: .txt, .pdf, .png
      */
     allowedFileTypes?: `.${string}`[];
+    /**
+     * Overrides the standard file size message
+     */
+    customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard file types message
+     */
+    customTypesMessage?: React.ReactNode;
     /**
      * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
      */
     maxFileSize?: number;
     variant?: 'caption' | 'body2';
 };
-declare const FileTypesMessage: ({ allowedFileTypes, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
+declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTypesMessage, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
 
 type HeaderMessageProps = {
     /**
@@ -319,4 +336,4 @@ type UploadProgressBarProps = {
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-export { Dropzone, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, type FileRowProps, FileSelector, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, useUploadCore };
+export { Dropzone, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, type FileRowProps, FileSelector, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, formatFileTooLarge, useUploadCore };

package/dist/index.d.ts

@@ -83,6 +83,7 @@ type ErrorAlertProps = {
     id: number;
     onClose: () => void;
 };
+declare const formatFileTooLarge: (message: string) => string;
 declare const ErrorAlert: ({ errors, fileName, id, onClose }: ErrorAlertProps) => react_jsx_runtime.JSX.Element | null;
 
 type Options = {
@@ -197,6 +198,14 @@ type FileSelectorProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Overrides the standard file size message
+     */
+    customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard file types message
+     */
+    customTypesMessage?: React.ReactNode;
     /**
      * Whether to enable the dropzone area
      */
@@ -206,7 +215,7 @@ type FileSelectorProps = {
      */
     endpoint?: string;
     /**
-     * Componet to render the File information. This should return a `ListItem`
+     * Component to render the File information. This should return a `ListItem`
      */
     customFileRow?: React.ElementType<{
         upload?: Upload;
@@ -272,20 +281,28 @@ type FileSelectorProps = {
      */
     disableRemove?: boolean;
 };
-declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
+declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
 type FileTypesMessageProps = {
     /**
      * Allowed file type extensions. Each extension should be prefixed with a ".". eg: .txt, .pdf, .png
      */
     allowedFileTypes?: `.${string}`[];
+    /**
+     * Overrides the standard file size message
+     */
+    customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard file types message
+     */
+    customTypesMessage?: React.ReactNode;
     /**
      * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
      */
     maxFileSize?: number;
     variant?: 'caption' | 'body2';
 };
-declare const FileTypesMessage: ({ allowedFileTypes, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
+declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTypesMessage, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
 
 type HeaderMessageProps = {
     /**
@@ -319,4 +336,4 @@ type UploadProgressBarProps = {
 };
 declare const UploadProgressBar: ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => react_jsx_runtime.JSX.Element;
 
-export { Dropzone, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, type FileRowProps, FileSelector, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, useUploadCore };
+export { Dropzone, type DropzoneProps, ErrorAlert, type ErrorAlertProps, FileList, type FileListProps, FilePickerBtn, type FilePickerBtnProps, FileRow, type FileRowProps, FileSelector, type FileSelectorProps, FileTypesMessage, type FileTypesMessageProps, HeaderMessage, type HeaderMessageProps, type Options, UploadProgressBar, type UploadProgressBarProps, type UploadQueryOptions, formatFileTooLarge, useUploadCore };

package/dist/index.js

@@ -88,6 +88,7 @@ __export(index_exports, {
   FileTypesMessage: () => FileTypesMessage,
   HeaderMessage: () => HeaderMessage,
   UploadProgressBar: () => UploadProgressBar,
+  formatFileTooLarge: () => formatFileTooLarge,
   useUploadCore: () => useUploadCore
 });
 module.exports = __toCommonJS(index_exports);
@@ -324,6 +325,46 @@ var Dropzone = ({
 // src/lib/ErrorAlert.tsx
 var import_mui_alert = require("@availity/mui-alert");
 var import_mui_list = require("@availity/mui-list");
+
+// src/lib/util.ts
+var import_mui_icon2 = require("@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: import_mui_icon2.FileImageIcon,
+  jpg: import_mui_icon2.FileImageIcon,
+  jpeg: import_mui_icon2.FileImageIcon,
+  gif: import_mui_icon2.FileImageIcon,
+  csv: import_mui_icon2.FileCsvIcon,
+  ppt: import_mui_icon2.FilePowerpointIcon,
+  pptx: import_mui_icon2.FilePowerpointIcon,
+  xls: import_mui_icon2.FileExcelIcon,
+  xlsx: import_mui_icon2.FileExcelIcon,
+  doc: import_mui_icon2.FileWordIcon,
+  docx: import_mui_icon2.FileWordIcon,
+  txt: import_mui_icon2.FileLinesIcon,
+  text: import_mui_icon2.FileLinesIcon,
+  zip: import_mui_icon2.FileArchiveIcon,
+  "7zip": import_mui_icon2.FileArchiveIcon,
+  xml: import_mui_icon2.FileCodeIcon,
+  html: import_mui_icon2.FileCodeIcon,
+  pdf: import_mui_icon2.FilePdfIcon
+};
+var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
+var getFileExtIcon = (fileName) => {
+  var _a;
+  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : import_mui_icon2.FileIcon;
+  return icon;
+};
+
+// src/lib/ErrorAlert.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var codes = {
   "file-too-large": "File exceeds maximum size",
@@ -332,6 +373,13 @@ var codes = {
   "too-many-file": "Too many files",
   "duplicate-name": "Duplicate file selected"
 };
+var FILE_SIZE_REGEX = /\b(\d+)\b/;
+var formatFileTooLarge = (message) => {
+  const fileSize = message.match(FILE_SIZE_REGEX);
+  if (!fileSize) return message;
+  const formattedSize = formatBytes(Number(fileSize[0]));
+  return message.replace(` bytes`, "").replace(FILE_SIZE_REGEX, formattedSize);
+};
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
   if (errors.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_alert.Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -341,23 +389,31 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
       " error(s) found when uploading ",
       fileName
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.List, { sx: {
-      listStyleType: "disc",
-      listStylePosition: "inside",
-      marginLeft: 1,
-      ".MuiListItem-root": {
-        display: "list-item"
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_mui_list.List,
+      {
+        sx: {
+          listStyleType: "disc",
+          listStylePosition: "inside",
+          marginLeft: 1,
+          ".MuiListItem-root": {
+            display: "list-item"
+          }
+        },
+        disablePadding: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errors.map((error) => {
+          const message = error.code === "file-too-large" ? formatFileTooLarge(error.message) : error.message;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.ListItem, { disableGutters: true, disablePadding: true, divider: false, children: message }, `${id}-${error.code}`);
+        }) })
       }
-    }, disablePadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errors.map((error) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.ListItem, { disableGutters: true, disablePadding: true, divider: false, children: error.message }, `${id}-${error.code}`);
-    }) }) })
+    )
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
       codes[errors[0].code] || "Error",
       ": ",
       fileName
     ] }),
-    errors[0].message
+    errors[0].code === "file-too-large" ? formatFileTooLarge(errors[0].message) : errors[0].message
   ] }) });
 };
 
@@ -376,9 +432,9 @@ var import_mui_button3 = require("@availity/mui-button");
 var import_Dialog = __toESM(require("@mui/material/Dialog"));
 var import_styles2 = require("@mui/material/styles");
 var import_mui_button2 = require("@availity/mui-button");
-var import_mui_icon2 = require("@availity/mui-icon");
+var import_mui_icon3 = require("@availity/mui-icon");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var CloseButton = (args) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_button2.IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_icon2.CloseIcon, { fontSize: "xsmall" }) }));
+var CloseButton = (args) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_button2.IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_icon3.CloseIcon, { fontSize: "xsmall" }) }));
 var CloseButtonSlot = (0, import_styles2.styled)(CloseButton, {
   name: "MuiDialog",
   slot: "AvCloseButton",
@@ -444,7 +500,7 @@ var DialogTitle = (_a) => {
 
 // src/lib/UploadProgressBar.tsx
 var import_mui_form_utils3 = require("@availity/mui-form-utils");
-var import_mui_icon3 = require("@availity/mui-icon");
+var import_mui_icon4 = require("@availity/mui-icon");
 var import_mui_layout3 = require("@availity/mui-layout");
 var import_mui_list2 = require("@availity/mui-list");
 var import_mui_progress = require("@availity/mui-progress");
@@ -587,7 +643,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onError.push(handleOnError);
   return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_layout3.Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_list2.ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, sx: { wordWrap: "break-word" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
       " ",
       errorMessage
     ] }),
@@ -604,7 +660,7 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
             onChange: handlePasswordChange,
             autoFocus: true,
             InputProps: {
-              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_button3.IconButton, { title: "password visibility", onClick: () => setShowPassword((prev) => !prev), edge: "end", children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.EyeSlashIcon, { fontSize: "small" }) }) })
+              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_button3.IconButton, { title: "password visibility", onClick: () => setShowPassword((prev) => !prev), edge: "end", children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeSlashIcon, { fontSize: "small" }) }) })
             }
           }
         ) }),
@@ -614,44 +670,6 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
 };
 
-// src/lib/util.ts
-var import_mui_icon4 = require("@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: import_mui_icon4.FileImageIcon,
-  jpg: import_mui_icon4.FileImageIcon,
-  jpeg: import_mui_icon4.FileImageIcon,
-  gif: import_mui_icon4.FileImageIcon,
-  csv: import_mui_icon4.FileCsvIcon,
-  ppt: import_mui_icon4.FilePowerpointIcon,
-  pptx: import_mui_icon4.FilePowerpointIcon,
-  xls: import_mui_icon4.FileExcelIcon,
-  xlsx: import_mui_icon4.FileExcelIcon,
-  doc: import_mui_icon4.FileWordIcon,
-  docx: import_mui_icon4.FileWordIcon,
-  txt: import_mui_icon4.FileLinesIcon,
-  text: import_mui_icon4.FileLinesIcon,
-  zip: import_mui_icon4.FileArchiveIcon,
-  "7zip": import_mui_icon4.FileArchiveIcon,
-  xml: import_mui_icon4.FileCodeIcon,
-  html: import_mui_icon4.FileCodeIcon,
-  pdf: import_mui_icon4.FilePdfIcon
-};
-var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
-var getFileExtIcon = (fileName) => {
-  var _a;
-  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : import_mui_icon4.FileIcon;
-  return icon;
-};
-
 // src/lib/useUploadCore.tsx
 var import_react_query = require("@tanstack/react-query");
 var import_upload_core = __toESM(require("@availity/upload-core"));
@@ -751,17 +769,20 @@ var import_react_hook_form3 = require("react-hook-form");
 var import_react_query2 = require("@tanstack/react-query");
 var import_mui_layout5 = require("@availity/mui-layout");
 var import_mui_typography5 = require("@availity/mui-typography");
+var import_mui_alert3 = require("@availity/mui-alert");
 
 // src/lib/FileTypesMessage.tsx
 var import_mui_typography3 = require("@availity/mui-typography");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var FileTypesMessage = ({
   allowedFileTypes = [],
+  customSizeMessage,
+  customTypesMessage,
   maxFileSize,
   variant = "caption"
 }) => {
-  const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
-  const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
+  const fileSizeMsg = customSizeMessage || (typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null);
+  const fileTypesMsg = customTypesMessage || (allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.");
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_mui_typography3.Typography, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
@@ -790,6 +811,8 @@ var FileSelector = ({
   bucketId,
   clientId,
   children,
+  customSizeMessage,
+  customTypesMessage,
   customerId,
   customFileRow,
   disabled = false,
@@ -843,6 +866,13 @@ var FileSelector = ({
     const rejections = fileRejections.filter((value) => value.id !== id);
     setFileRejections(rejections);
   };
+  const TOO_MANY_FILES_CODE = "too-many-files";
+  const tooManyFilesRejections = fileRejections.filter(
+    (rejection) => rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+  const otherRejections = fileRejections.filter(
+    (rejection) => !rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
       label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_typography5.Typography, { marginBottom: "4px", children: label }) : null,
@@ -863,12 +893,29 @@ var FileSelector = ({
           validator
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        FileTypesMessage,
+        {
+          allowedFileTypes,
+          maxFileSize: maxSize,
+          customSizeMessage,
+          customTypesMessage,
+          variant: "caption"
+        }
+      ),
       children
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HeaderMessage, { maxFiles, maxSize }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileTypesMessage, { allowedFileTypes, variant: "body2" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          FileTypesMessage,
+          {
+            allowedFileTypes,
+            customSizeMessage,
+            customTypesMessage,
+            variant: "body2"
+          }
+        )
       ] }),
       children ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -889,7 +936,20 @@ var FileSelector = ({
         }
       ) })
     ] }),
-    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    tooManyFilesRejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_mui_alert3.Alert,
+      {
+        severity: "error",
+        onClose: () => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id)),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_alert3.AlertTitle, { children: "Items not allowed." }),
+          "Too many files are selected for upload, maximum ",
+          maxFiles,
+          " allowed."
+        ]
+      }
+    ),
+    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ErrorAlert,
       {
         errors: rejection.errors,
@@ -898,7 +958,7 @@ var FileSelector = ({
         onClose: () => handleRemoveRejection(rejection.id)
       },
       rejection.id
-    )) : null,
+    )),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       FileList,
       {
@@ -923,5 +983,6 @@ var FileSelector = ({
   FileTypesMessage,
   HeaderMessage,
   UploadProgressBar,
+  formatFileTooLarge,
   useUploadCore
 });

package/dist/index.mjs

@@ -282,6 +282,57 @@ var Dropzone = ({
 // src/lib/ErrorAlert.tsx
 import { Alert, AlertTitle } from "@availity/mui-alert";
 import { List, ListItem } from "@availity/mui-list";
+
+// 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 getFileExtIcon = (fileName) => {
+  var _a;
+  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
+  return icon;
+};
+
+// src/lib/ErrorAlert.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var codes = {
   "file-too-large": "File exceeds maximum size",
@@ -290,6 +341,13 @@ var codes = {
   "too-many-file": "Too many files",
   "duplicate-name": "Duplicate file selected"
 };
+var FILE_SIZE_REGEX = /\b(\d+)\b/;
+var formatFileTooLarge = (message) => {
+  const fileSize = message.match(FILE_SIZE_REGEX);
+  if (!fileSize) return message;
+  const formattedSize = formatBytes(Number(fileSize[0]));
+  return message.replace(` bytes`, "").replace(FILE_SIZE_REGEX, formattedSize);
+};
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
   if (errors.length === 0) return null;
   return /* @__PURE__ */ jsx3(Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
@@ -299,23 +357,31 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
       " error(s) found when uploading ",
       fileName
     ] }),
-    /* @__PURE__ */ jsx3(List, { sx: {
-      listStyleType: "disc",
-      listStylePosition: "inside",
-      marginLeft: 1,
-      ".MuiListItem-root": {
-        display: "list-item"
+    /* @__PURE__ */ jsx3(
+      List,
+      {
+        sx: {
+          listStyleType: "disc",
+          listStylePosition: "inside",
+          marginLeft: 1,
+          ".MuiListItem-root": {
+            display: "list-item"
+          }
+        },
+        disablePadding: true,
+        children: /* @__PURE__ */ jsx3(Fragment3, { children: errors.map((error) => {
+          const message = error.code === "file-too-large" ? formatFileTooLarge(error.message) : error.message;
+          return /* @__PURE__ */ jsx3(ListItem, { disableGutters: true, disablePadding: true, divider: false, children: message }, `${id}-${error.code}`);
+        }) })
       }
-    }, disablePadding: true, children: /* @__PURE__ */ jsx3(Fragment3, { children: errors.map((error) => {
-      return /* @__PURE__ */ jsx3(ListItem, { disableGutters: true, disablePadding: true, divider: false, children: error.message }, `${id}-${error.code}`);
-    }) }) })
+    )
   ] }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3(AlertTitle, { children: [
       codes[errors[0].code] || "Error",
       ": ",
       fileName
     ] }),
-    errors[0].message
+    errors[0].code === "file-too-large" ? formatFileTooLarge(errors[0].message) : errors[0].message
   ] }) });
 };
 
@@ -578,55 +644,6 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   ] }) : /* @__PURE__ */ jsx10(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
 };
 
-// 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 getFileExtIcon = (fileName) => {
-  var _a;
-  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
-  return icon;
-};
-
 // src/lib/useUploadCore.tsx
 import { useQuery } from "@tanstack/react-query";
 import Upload from "@availity/upload-core";
@@ -726,17 +743,20 @@ import { useFormContext as useFormContext2 } from "react-hook-form";
 import { useQueryClient } from "@tanstack/react-query";
 import { Grid as Grid3 } from "@availity/mui-layout";
 import { Typography as Typography5 } from "@availity/mui-typography";
+import { Alert as Alert2, AlertTitle as AlertTitle2 } from "@availity/mui-alert";
 
 // src/lib/FileTypesMessage.tsx
 import { Typography as Typography3 } from "@availity/mui-typography";
 import { jsxs as jsxs9 } from "react/jsx-runtime";
 var FileTypesMessage = ({
   allowedFileTypes = [],
+  customSizeMessage,
+  customTypesMessage,
   maxFileSize,
   variant = "caption"
 }) => {
-  const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
-  const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
+  const fileSizeMsg = customSizeMessage || (typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null);
+  const fileTypesMsg = customTypesMessage || (allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.");
   return /* @__PURE__ */ jsxs9(Typography3, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
@@ -765,6 +785,8 @@ var FileSelector = ({
   bucketId,
   clientId,
   children,
+  customSizeMessage,
+  customTypesMessage,
   customerId,
   customFileRow,
   disabled = false,
@@ -818,6 +840,13 @@ var FileSelector = ({
     const rejections = fileRejections.filter((value) => value.id !== id);
     setFileRejections(rejections);
   };
+  const TOO_MANY_FILES_CODE = "too-many-files";
+  const tooManyFilesRejections = fileRejections.filter(
+    (rejection) => rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+  const otherRejections = fileRejections.filter(
+    (rejection) => !rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
   return /* @__PURE__ */ jsxs11(Fragment5, { children: [
     enableDropArea ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
       label ? /* @__PURE__ */ jsx12(Typography5, { marginBottom: "4px", children: label }) : null,
@@ -838,12 +867,29 @@ var FileSelector = ({
           validator
         }
       ),
-      /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
+      /* @__PURE__ */ jsx12(
+        FileTypesMessage,
+        {
+          allowedFileTypes,
+          maxFileSize: maxSize,
+          customSizeMessage,
+          customTypesMessage,
+          variant: "caption"
+        }
+      ),
       children
     ] }) : /* @__PURE__ */ jsxs11(Grid3, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs11(Grid3, { children: [
         /* @__PURE__ */ jsx12(HeaderMessage, { maxFiles, maxSize }),
-        /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, variant: "body2" })
+        /* @__PURE__ */ jsx12(
+          FileTypesMessage,
+          {
+            allowedFileTypes,
+            customSizeMessage,
+            customTypesMessage,
+            variant: "body2"
+          }
+        )
       ] }),
       children ? /* @__PURE__ */ jsx12(Grid3, { children }) : null,
       /* @__PURE__ */ jsx12(Grid3, { children: /* @__PURE__ */ jsx12(
@@ -864,7 +910,20 @@ var FileSelector = ({
         }
       ) })
     ] }),
-    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ jsx12(
+    tooManyFilesRejections.length > 0 && /* @__PURE__ */ jsxs11(
+      Alert2,
+      {
+        severity: "error",
+        onClose: () => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id)),
+        children: [
+          /* @__PURE__ */ jsx12(AlertTitle2, { children: "Items not allowed." }),
+          "Too many files are selected for upload, maximum ",
+          maxFiles,
+          " allowed."
+        ]
+      }
+    ),
+    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ jsx12(
       ErrorAlert,
       {
         errors: rejection.errors,
@@ -873,7 +932,7 @@ var FileSelector = ({
         onClose: () => handleRemoveRejection(rejection.id)
       },
       rejection.id
-    )) : null,
+    )),
     /* @__PURE__ */ jsx12(
       FileList,
       {
@@ -897,5 +956,6 @@ export {
   FileTypesMessage,
   HeaderMessage,
   UploadProgressBar,
+  formatFileTooLarge,
   useUploadCore
 };

package/package.json

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

package/src/lib/ErrorAlert.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import { ErrorAlert } from './ErrorAlert';
+import { ErrorAlert, formatFileTooLarge } from './ErrorAlert';
 
 describe('ErrorAlert', () => {
   test('should render error message', () => {
@@ -9,3 +9,17 @@ describe('ErrorAlert', () => {
     expect(screen.getByText('Error: file')).toBeDefined();
   });
 });
+
+describe('formatFileTooLarge', () => {
+  test('should format file too large error message', () => {
+    const formattedError = formatFileTooLarge('File is larger than 10485760 bytes');
+
+    expect(formattedError).toEqual('File is larger than 10 MB');
+  });
+
+  test('should return original error message if it does not match', () => {
+    const formattedError = formatFileTooLarge('File is larger than one hundred bytes');
+
+    expect(formattedError).toEqual('File is larger than one hundred bytes');
+  });
+});

package/src/lib/ErrorAlert.tsx

@@ -1,6 +1,7 @@
 import { Alert, AlertTitle } from '@availity/mui-alert';
 import { List, ListItem } from '@availity/mui-list';
 import type { FileRejection } from 'react-dropzone';
+import { formatBytes } from './util';
 
 const codes: Record<string, string> = {
   'file-too-large': 'File exceeds maximum size',
@@ -27,43 +28,59 @@ export type ErrorAlertProps = {
   onClose: () => void;
 };
 
+const FILE_SIZE_REGEX = /\b(\d+)\b/;
+
+export const formatFileTooLarge = (message: string): string => {
+  const fileSize = message.match(FILE_SIZE_REGEX);
+
+  if (!fileSize) return message;
+
+  const formattedSize = formatBytes(Number(fileSize[0]));
+
+  return message.replace(` bytes`, '').replace(FILE_SIZE_REGEX, formattedSize);
+};
+
 export const ErrorAlert = ({ errors, fileName, id, onClose }: ErrorAlertProps) => {
   if (errors.length === 0) return null;
 
   return (
     <Alert severity="error" onClose={onClose}>
-      {errors.length > 1 ?
+      {errors.length > 1 ? (
         <>
           <AlertTitle>
             There were {errors.length} error(s) found when uploading {fileName}
           </AlertTitle>
-          <List sx={{
-            listStyleType: 'disc',
-            listStylePosition: 'inside',
-            marginLeft: 1,
-            '.MuiListItem-root': {
-              display: 'list-item'
-            }
-          }} disablePadding>
+          <List
+            sx={{
+              listStyleType: 'disc',
+              listStylePosition: 'inside',
+              marginLeft: 1,
+              '.MuiListItem-root': {
+                display: 'list-item',
+              },
+            }}
+            disablePadding
+          >
             <>
               {errors.map((error) => {
+                const message = error.code === 'file-too-large' ? formatFileTooLarge(error.message) : error.message;
                 return (
                   <ListItem disableGutters disablePadding divider={false} key={`${id}-${error.code}`}>
-                    {error.message}
+                    {message}
                   </ListItem>
                 );
               })}
             </>
           </List>
         </>
-      :
+      ) : (
         <>
           <AlertTitle>
             {codes[errors[0].code] || 'Error'}: {fileName}
           </AlertTitle>
-          {errors[0].message}
+          {errors[0].code === 'file-too-large' ? formatFileTooLarge(errors[0].message) : errors[0].message}
         </>
-      }
+      )}
     </Alert>
   );
 };

package/src/lib/FileSelector.stories.tsx

@@ -42,7 +42,7 @@ const meta: Meta<typeof FileSelector> = {
     uploadOptions: {
       retryDelays: [],
     },
-    maxFiles: 5,
+    maxFiles: 2,
     maxSize: 1 * 1024 * 1024, // 1MB
     enableDropArea: true,
     isCloud: true,
@@ -100,7 +100,7 @@ export const _FileSelector: StoryObj<typeof FileSelector> = {
               </DismissableAlert>
             </FileSelector>
             {files.length > 0 && (
-              <Grid size={{xs: 12}} justifyContent="end" display="flex" paddingTop={2.5}>
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
                 <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
                   Submit
                 </Button>
@@ -140,9 +140,9 @@ export const _ButtonOnly: StoryObj<typeof FileSelector> = {
       <Paper sx={{ padding: '2rem' }}>
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
-            <FileSelector {...props} enableDropArea={false}/>
+            <FileSelector {...props} enableDropArea={false} />
             {files.length > 0 && (
-              <Grid size={{xs: 12}} justifyContent="end" display="flex" paddingTop={2.5}>
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
                 <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
                   Submit
                 </Button>
@@ -182,9 +182,9 @@ export const _Encrypted: StoryObj<typeof FileSelector> = {
       <Paper sx={{ padding: '2rem' }}>
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
-            <FileSelector {...props} bucketId="enc"/>
+            <FileSelector {...props} bucketId="enc" />
             {files.length > 0 && (
-              <Grid size={{xs: 12}} justifyContent="end" display="flex" paddingTop={2.5}>
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
                 <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
                   Submit
                 </Button>
@@ -196,9 +196,109 @@ export const _Encrypted: StoryObj<typeof FileSelector> = {
     );
   },
   args: {
-    bucketId: 'enc'
+    bucketId: 'enc',
   },
   argTypes: {
-    bucketId: { control: false }
-  }
+    bucketId: { control: false },
+  },
+};
+
+export const _FileSelectorCustomTypesMessage: StoryObj<typeof FileSelector> = {
+  render: (props: FileSelectorProps) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const client = useQueryClient();
+
+    const files = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+
+      const queries = client.getQueriesData<Upload>(['upload']);
+      const uploads = [];
+      for (const [, data] of queries) {
+        if (data) uploads.push(data);
+      }
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector {...props}>
+              <DismissableAlert severity="warning">
+                <AlertTitle>Make an Appeal</AlertTitle>
+                This is an example alert. It is not part of the component. `children` you pass to the component will
+                show up here.
+              </DismissableAlert>
+            </FileSelector>
+            {files.length > 0 && (
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+  args: {
+    customTypesMessage: 'Only cool file types allowed',
+  },
+};
+
+export const _FileSelectorCustomSizeMessage: StoryObj<typeof FileSelector> = {
+  render: (props: FileSelectorProps) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const client = useQueryClient();
+
+    const files = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+
+      const queries = client.getQueriesData<Upload>(['upload']);
+      const uploads = [];
+      for (const [, data] of queries) {
+        if (data) uploads.push(data);
+      }
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector {...props}>
+              <DismissableAlert severity="warning">
+                <AlertTitle>Make an Appeal</AlertTitle>
+                This is an example alert. It is not part of the component. `children` you pass to the component will
+                show up here.
+              </DismissableAlert>
+            </FileSelector>
+            {files.length > 0 && (
+              <Grid size={{ xs: 12 }} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+  args: {
+    customSizeMessage: <div>Only huge files allowed</div>,
+  },
 };

package/src/lib/FileSelector.tsx

@@ -1,16 +1,16 @@
 import { useState } from 'react';
-import type { ChangeEvent, ElementType, ReactNode } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 import { useFormContext } from 'react-hook-form';
 import type { DropEvent, FileError, FileRejection } from 'react-dropzone/typings/react-dropzone';
 import { useQueryClient } from '@tanstack/react-query';
 import type { default as Upload } from '@availity/upload-core';
 import { Grid } from '@availity/mui-layout';
 import { Typography } from '@availity/mui-typography';
+import { Alert, AlertTitle } from '@availity/mui-alert';
 
 import { Dropzone } from './Dropzone';
 import { ErrorAlert } from './ErrorAlert';
 import { FileList } from './FileList';
-import type { FileListProps } from './FileList';
 import { FileTypesMessage } from './FileTypesMessage';
 import { HeaderMessage } from './HeaderMessage';
 import type { Options, UploadQueryOptions } from './useUploadCore';
@@ -55,6 +55,14 @@ export type FileSelectorProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Overrides the standard file size message
+   */
+  customSizeMessage?: React.ReactNode;
+  /**
+   * Overrides the standard file types message
+   */
+  customTypesMessage?: React.ReactNode;
   /**
    * Whether to enable the dropzone area
    */
@@ -64,7 +72,7 @@ export type FileSelectorProps = {
    */
   endpoint?: string;
   /**
-   * Componet to render the File information. This should return a `ListItem`
+   * Component to render the File information. This should return a `ListItem`
    */
   customFileRow?: React.ElementType<{
     upload?: Upload;
@@ -136,6 +144,8 @@ export const FileSelector = ({
   bucketId,
   clientId,
   children,
+  customSizeMessage,
+  customTypesMessage,
   customerId,
   customFileRow,
   disabled = false,
@@ -206,6 +216,18 @@ export const FileSelector = ({
     setFileRejections(rejections);
   };
 
+  const TOO_MANY_FILES_CODE = 'too-many-files';
+
+  // Extract too-many-files rejections
+  const tooManyFilesRejections = fileRejections.filter((rejection) =>
+    rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+
+  // Extract other rejections
+  const otherRejections = fileRejections.filter(
+    (rejection) => !rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+
   return (
     <>
       {enableDropArea ? (
@@ -225,14 +247,25 @@ export const FileSelector = ({
             setTotalSize={setTotalSize}
             validator={validator}
           />
-          <FileTypesMessage allowedFileTypes={allowedFileTypes} maxFileSize={maxSize} variant="caption" />
+          <FileTypesMessage
+            allowedFileTypes={allowedFileTypes}
+            maxFileSize={maxSize}
+            customSizeMessage={customSizeMessage}
+            customTypesMessage={customTypesMessage}
+            variant="caption"
+          />
           {children}
         </>
       ) : (
         <Grid container rowSpacing={3} flexDirection="column">
           <Grid>
             <HeaderMessage maxFiles={maxFiles} maxSize={maxSize} />
-            <FileTypesMessage allowedFileTypes={allowedFileTypes} variant="body2" />
+            <FileTypesMessage
+              allowedFileTypes={allowedFileTypes}
+              customSizeMessage={customSizeMessage}
+              customTypesMessage={customTypesMessage}
+              variant="body2"
+            />
           </Grid>
           {children ? <Grid>{children}</Grid> : null}
           <Grid>
@@ -253,17 +286,26 @@ export const FileSelector = ({
           </Grid>
         </Grid>
       )}
-      {fileRejections.length > 0
-        ? fileRejections.map((rejection) => (
-            <ErrorAlert
-              key={rejection.id}
-              errors={rejection.errors}
-              fileName={rejection.file.name}
-              id={rejection.id}
-              onClose={() => handleRemoveRejection(rejection.id)}
-            />
-          ))
-        : null}
+      {tooManyFilesRejections.length > 0 && (
+        <Alert
+          severity="error"
+          onClose={() => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id))}
+        >
+          <AlertTitle>Items not allowed.</AlertTitle>
+          Too many files are selected for upload, maximum {maxFiles} allowed.
+        </Alert>
+      )}
+
+      {otherRejections.length > 0 &&
+        otherRejections.map((rejection) => (
+          <ErrorAlert
+            key={rejection.id}
+            errors={rejection.errors}
+            fileName={rejection.file.name}
+            id={rejection.id}
+            onClose={() => handleRemoveRejection(rejection.id)}
+          />
+        ))}
       <FileList
         files={files || []}
         options={options}

package/src/lib/FileTypesMessage.test.tsx

@@ -14,4 +14,16 @@ describe('FileTypesMessage', () => {
 
     expect(screen.getByText(/Maximum file size is/)).toBeTruthy();
   });
+
+  test('custom size message', () => {
+    render(<FileTypesMessage customSizeMessage="Only small files" variant="body2" />);
+
+    expect(screen.getByText(/Only small files/)).toBeTruthy();
+  });
+
+  test('custom file types message', () => {
+    render(<FileTypesMessage customTypesMessage="Only cool types allowed" variant="body2" />);
+
+    expect(screen.getByText(/Only cool types allowed/)).toBeTruthy();
+  });
 });

package/src/lib/FileTypesMessage.tsx

@@ -7,6 +7,14 @@ export type FileTypesMessageProps = {
    * Allowed file type extensions. Each extension should be prefixed with a ".". eg: .txt, .pdf, .png
    */
   allowedFileTypes?: `.${string}`[];
+  /**
+   * Overrides the standard file size message
+   */
+  customSizeMessage?: React.ReactNode;
+  /**
+   * Overrides the standard file types message
+   */
+  customTypesMessage?: React.ReactNode;
   /**
    * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
    */
@@ -16,15 +24,19 @@ export type FileTypesMessageProps = {
 
 export const FileTypesMessage = ({
   allowedFileTypes = [],
+  customSizeMessage,
+  customTypesMessage,
   maxFileSize,
   variant = 'caption',
 }: FileTypesMessageProps) => {
-  const fileSizeMsg = typeof maxFileSize === 'number' ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
+  const fileSizeMsg =
+    customSizeMessage ||
+    (typeof maxFileSize === 'number' ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null);
   const fileTypesMsg =
-    allowedFileTypes.length > 0
+    customTypesMessage ||
+    (allowedFileTypes.length > 0
       ? `Supported file types include: ${allowedFileTypes.join(', ')}`
-      : 'All file types allowed.';
-
+      : 'All file types allowed.');
   return (
     <Typography variant={variant}>
       {fileSizeMsg}