@availity/mui-file-selector 1.7.1 → 1.8.1

package/dist/index.js

@@ -108,7 +108,7 @@ var import_styles = require("@mui/material/styles");
 var import_react_dropzone = require("react-dropzone");
 var import_react_hook_form2 = require("react-hook-form");
 var import_mui_divider = require("@availity/mui-divider");
-var import_mui_icon = require("@availity/mui-icon");
+var import_mui_icon2 = require("@availity/mui-icon");
 var import_mui_layout = require("@availity/mui-layout");
 var import_mui_typography = require("@availity/mui-typography");
 
@@ -166,6 +166,55 @@ var FilePickerBtn = (_a) => {
   ] });
 };
 
+// src/lib/util.ts
+var import_mui_icon = 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_icon.FileImageIcon,
+  jpg: import_mui_icon.FileImageIcon,
+  jpeg: import_mui_icon.FileImageIcon,
+  gif: import_mui_icon.FileImageIcon,
+  csv: import_mui_icon.FileCsvIcon,
+  ppt: import_mui_icon.FilePowerpointIcon,
+  pptx: import_mui_icon.FilePowerpointIcon,
+  xls: import_mui_icon.FileExcelIcon,
+  xlsx: import_mui_icon.FileExcelIcon,
+  doc: import_mui_icon.FileWordIcon,
+  docx: import_mui_icon.FileWordIcon,
+  txt: import_mui_icon.FileLinesIcon,
+  text: import_mui_icon.FileLinesIcon,
+  zip: import_mui_icon.FileArchiveIcon,
+  "7zip": import_mui_icon.FileArchiveIcon,
+  xml: import_mui_icon.FileCodeIcon,
+  html: import_mui_icon.FileCodeIcon,
+  pdf: import_mui_icon.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] : import_mui_icon.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
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var outerBoxStyles = {
@@ -201,10 +250,12 @@ var DropzoneContainer = (0, import_styles.styled)(import_mui_layout.Box, { name:
 });
 var Dropzone = ({
   allowedFileTypes = [],
+  allowedFileNameCharacters,
   disabled,
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -234,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) {
@@ -246,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) => {
@@ -257,7 +329,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;
@@ -284,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)({
@@ -309,7 +422,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();
@@ -317,7 +430,7 @@ var Dropzone = ({
   };
   const hasFiles = getFieldValue().length > 0;
   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_icon.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
+    /* @__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" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { flexItem: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", children: "OR" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -343,7 +456,7 @@ var Dropzone = ({
       onClick: handleOnClick,
       inputProps,
       onChange: handleOnChange,
-      startIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.PlusIcon, {}),
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.PlusIcon, {}),
       children: hasFiles ? "Add More Files" : "Add File(s)"
     }
   );
@@ -358,57 +471,6 @@ var import_mui_icon3 = require("@availity/mui-icon");
 var import_mui_layout2 = require("@availity/mui-layout");
 var import_mui_typography2 = require("@availity/mui-typography");
 var import_upload_core = __toESM(require("@availity/upload-core"));
-
-// 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 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] : import_mui_icon2.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
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var counter2 = createCounter();
 function startUpload(file, options) {
@@ -430,6 +492,7 @@ var Dropzone2 = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -461,6 +524,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,7 +557,7 @@ 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* () {
@@ -484,8 +568,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;
@@ -512,7 +637,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,
@@ -536,7 +661,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();
@@ -582,6 +707,7 @@ var import_mui_list = require("@availity/mui-list");
 var import_jsx_runtime4 = require("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",
@@ -1087,14 +1213,18 @@ var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsxs)(import_mui_typography4.Typography, { variant, children: [
     fileSizeMsg,
+    totalFileSizeMsg,
     fileTypesMsg
   ] });
 };
@@ -1102,12 +1232,14 @@ var FileTypesMessage = ({
 // src/lib/HeaderMessage.tsx
 var import_mui_typography5 = require("@availity/mui-typography");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var HeaderMessage = ({ maxFiles, maxSize }) => {
+var HeaderMessage = ({ maxFiles, maxSize, maxTotalSize }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_mui_typography5.Typography, { 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)}`
   ] });
 };
 
@@ -1122,6 +1254,7 @@ var FileSelector = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1132,6 +1265,7 @@ var FileSelector = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1191,10 +1325,12 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1208,7 +1344,9 @@ var FileSelector = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1216,11 +1354,12 @@ var FileSelector = ({
       children
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_mui_layout7.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_mui_layout7.Grid, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           FileTypesMessage,
           {
             allowedFileTypes,
+            customTotalSizeMessage,
             customSizeMessage,
             customTypesMessage,
             variant: "body2"
@@ -1233,10 +1372,12 @@ var FileSelector = ({
         {
           name,
           allowedFileTypes,
+          allowedFileNameCharacters,
           disabled,
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1298,6 +1439,7 @@ var FileSelector2 = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1308,6 +1450,7 @@ var FileSelector2 = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1368,6 +1511,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1382,7 +1526,9 @@ var FileSelector2 = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1390,12 +1536,13 @@ var FileSelector2 = ({
       children
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_mui_layout8.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_mui_layout8.Grid, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           FileTypesMessage,
           {
             allowedFileTypes,
             customSizeMessage,
+            customTotalSizeMessage,
             customTypesMessage,
             variant: "body2"
           }
@@ -1411,6 +1558,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,