@availity/mui-file-selector 1.7.1 → 1.8.0

package/dist/index.mjs

@@ -114,6 +114,66 @@ var FilePickerBtn = (_a) => {
   ] });
 };
 
+// src/lib/util.ts
+import {
+  FileArchiveIcon,
+  FileCodeIcon,
+  FileCsvIcon,
+  FileExcelIcon,
+  FileIcon,
+  FileImageIcon,
+  FileLinesIcon,
+  FilePdfIcon,
+  FilePowerpointIcon,
+  FileWordIcon
+} from "@availity/mui-icon";
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+var FILE_EXT_ICONS = {
+  png: FileImageIcon,
+  jpg: FileImageIcon,
+  jpeg: FileImageIcon,
+  gif: FileImageIcon,
+  csv: FileCsvIcon,
+  ppt: FilePowerpointIcon,
+  pptx: FilePowerpointIcon,
+  xls: FileExcelIcon,
+  xlsx: FileExcelIcon,
+  doc: FileWordIcon,
+  docx: FileWordIcon,
+  txt: FileLinesIcon,
+  text: FileLinesIcon,
+  zip: FileArchiveIcon,
+  "7zip": FileArchiveIcon,
+  xml: FileCodeIcon,
+  html: FileCodeIcon,
+  pdf: FilePdfIcon
+};
+var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
+var getFileExtension = (fileName) => {
+  var _a;
+  return ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+};
+var getFileExtIcon = (fileName) => {
+  const ext = getFileExtension(fileName);
+  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
+};
+var dedupeErrors = (errors) => {
+  const dedupedErrors = errors.reduce((acc, error) => {
+    if (!acc.find((err) => err.code === error.code)) {
+      acc.push(error);
+    }
+    return acc;
+  }, []);
+  return dedupedErrors;
+};
+
 // src/lib/Dropzone.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var outerBoxStyles = {
@@ -153,6 +213,7 @@ var Dropzone = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -205,7 +266,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;
@@ -306,68 +408,6 @@ import { CloudUploadIcon as CloudUploadIcon2, PlusIcon as PlusIcon2 } from "@ava
 import { Box as Box2, Stack as Stack2 } from "@availity/mui-layout";
 import { Typography as Typography2 } from "@availity/mui-typography";
 import Upload from "@availity/upload-core";
-
-// src/lib/util.ts
-import {
-  FileArchiveIcon,
-  FileCodeIcon,
-  FileCsvIcon,
-  FileExcelIcon,
-  FileIcon,
-  FileImageIcon,
-  FileLinesIcon,
-  FilePdfIcon,
-  FilePowerpointIcon,
-  FileWordIcon
-} from "@availity/mui-icon";
-function formatBytes(bytes, decimals = 2) {
-  if (!+bytes) return "0 Bytes";
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-var FILE_EXT_ICONS = {
-  png: FileImageIcon,
-  jpg: FileImageIcon,
-  jpeg: FileImageIcon,
-  gif: FileImageIcon,
-  csv: FileCsvIcon,
-  ppt: FilePowerpointIcon,
-  pptx: FilePowerpointIcon,
-  xls: FileExcelIcon,
-  xlsx: FileExcelIcon,
-  doc: FileWordIcon,
-  docx: FileWordIcon,
-  txt: FileLinesIcon,
-  text: FileLinesIcon,
-  zip: FileArchiveIcon,
-  "7zip": FileArchiveIcon,
-  xml: FileCodeIcon,
-  html: FileCodeIcon,
-  pdf: FilePdfIcon
-};
-var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
-var getFileExtension = (fileName) => {
-  var _a;
-  return ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-};
-var getFileExtIcon = (fileName) => {
-  const ext = getFileExtension(fileName);
-  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
-};
-var dedupeErrors = (errors) => {
-  const dedupedErrors = errors.reduce((acc, error) => {
-    if (!acc.find((err) => err.code === error.code)) {
-      acc.push(error);
-    }
-    return acc;
-  }, []);
-  return dedupedErrors;
-};
-
-// src/lib/Dropzone2.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var counter2 = createCounter();
 function startUpload(file, options) {
@@ -389,6 +429,7 @@ var Dropzone2 = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -443,8 +484,50 @@ 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);
+        console.log({ previous });
+        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;
@@ -541,6 +624,7 @@ import { List, ListItem } from "@availity/mui-list";
 import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var codes = {
   "file-too-large": "File exceeds maximum size",
+  "upload-too-large": "File causes maximum total upload size to be exceeded",
   "file-invalid-type": "File has an invalid type",
   "file-too-small": "File is smaller than minimum size",
   "too-many-file": "Too many files",
@@ -1052,14 +1136,18 @@ import { jsxs as jsxs11 } from "react/jsx-runtime";
 var FileTypesMessage = ({
   allowedFileTypes = [],
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   maxFileSize,
+  maxTotalSize,
   variant = "caption"
 }) => {
   const fileSizeMsg = customSizeMessage || (typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null);
+  const totalFileSizeMsg = customTotalSizeMessage || (typeof maxTotalSize === "number" ? `Maximum total upload size is ${formatBytes(maxTotalSize)}. ` : null);
   const fileTypesMsg = customTypesMessage || (allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.");
   return /* @__PURE__ */ jsxs11(Typography4, { variant, children: [
     fileSizeMsg,
+    totalFileSizeMsg,
     fileTypesMsg
   ] });
 };
@@ -1067,12 +1155,14 @@ var FileTypesMessage = ({
 // src/lib/HeaderMessage.tsx
 import { Typography as Typography5 } from "@availity/mui-typography";
 import { jsxs as jsxs12 } from "react/jsx-runtime";
-var HeaderMessage = ({ maxFiles, maxSize }) => {
+var HeaderMessage = ({ maxFiles, maxSize, maxTotalSize }) => {
   return /* @__PURE__ */ jsxs12(Typography5, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
-    formatBytes(maxSize)
+    formatBytes(maxSize),
+    " ",
+    maxTotalSize && `and a maximum total size of ${formatBytes(maxTotalSize)}`
   ] });
 };
 
@@ -1087,6 +1177,7 @@ var FileSelector = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1097,6 +1188,7 @@ var FileSelector = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1160,6 +1252,7 @@ var FileSelector = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1173,7 +1266,9 @@ var FileSelector = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1181,11 +1276,12 @@ var FileSelector = ({
       children
     ] }) : /* @__PURE__ */ jsxs13(Grid4, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs13(Grid4, { children: [
-        /* @__PURE__ */ jsx14(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx14(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ jsx14(
           FileTypesMessage,
           {
             allowedFileTypes,
+            customTotalSizeMessage,
             customSizeMessage,
             customTypesMessage,
             variant: "body2"
@@ -1202,6 +1298,7 @@ var FileSelector = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1263,6 +1360,7 @@ var FileSelector2 = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1273,6 +1371,7 @@ var FileSelector2 = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1333,6 +1432,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1347,7 +1447,9 @@ var FileSelector2 = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1355,12 +1457,13 @@ var FileSelector2 = ({
       children
     ] }) : /* @__PURE__ */ jsxs14(Grid5, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ jsxs14(Grid5, { children: [
-        /* @__PURE__ */ jsx15(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx15(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ jsx15(
           FileTypesMessage,
           {
             allowedFileTypes,
             customSizeMessage,
+            customTotalSizeMessage,
             customTypesMessage,
             variant: "body2"
           }
@@ -1376,6 +1479,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,

package/package.json

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

package/src/lib/Dropzone.tsx

@@ -11,6 +11,7 @@ import { Box, Stack } from '@availity/mui-layout';
 import { Typography } from '@availity/mui-typography';
 
 import { FilePickerBtn } from './FilePickerBtn';
+import { formatBytes } from './util';
 
 export const outerBoxStyles = {
   backgroundColor: 'background.secondary',
@@ -66,6 +67,10 @@ export type DropzoneProps = {
    * Maximum size of each file in bytes
    */
   maxSize?: number;
+  /**
+   * Maximum size of total upload in bytes
+   */
+  maxTotalSize?: number;
   /**
    * Whether multiple file selection is allowed
    */
@@ -110,6 +115,7 @@ export const Dropzone = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -169,8 +175,64 @@ export const Dropzone = ({
 
       const previous = watch(name) ?? [];
 
+      if (maxTotalSize) {
+        // Calculate current total size
+        const currentTotalSize = previous.reduce((sum: number, file: File) => sum + file.size, 0);
+        let newSize = 0;
+
+        const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
+        let sizeCounter = 0;
+
+        // Find the index where we exceed the total size limit
+        const cutoffIndex = acceptedFiles.findIndex((file) => {
+          sizeCounter += file.size;
+          return sizeCounter > availableSize;
+        });
+
+        // If we found files that exceed the limit
+        if (cutoffIndex !== -1) {
+          // Files that fit within the size limit
+          const filesToAdd = acceptedFiles.slice(0, cutoffIndex === 0 ? 0 : cutoffIndex);
+
+          // Create rejection for excess files
+          fileRejections.push({
+            file: acceptedFiles[cutoffIndex],
+            errors: [
+              {
+                code: 'upload-too-large',
+                message: `Total upload size exceeds the limit of ${formatBytes(maxTotalSize)}.`,
+              },
+            ],
+            id: counter.increment(),
+          });
+
+          // Update acceptedFiles to only include files that fit
+          acceptedFiles = filesToAdd;
+        }
+
+        // Calculate size of accepted files for the state update
+        newSize = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
+        setTotalSize((prev) => prev + newSize);
+      }
+
       // Set accepted files to form context
-      setValue(name, previous.concat(acceptedFiles));
+      const remainingSlots = maxFiles ? Math.max(0, maxFiles - previous.length) : acceptedFiles.length;
+      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
+      setValue(name, previous.concat(filesToAdd));
+
+      // Add rejections for excess files if needed
+      if (maxFiles && acceptedFiles.length > remainingSlots) {
+        fileRejections.push({
+          file: acceptedFiles[remainingSlots], // Use the first excess file
+          errors: [
+            {
+              code: 'too-many-files',
+              message: `Too many files. You may only upload ${maxFiles} file(s).`,
+            },
+          ],
+          id: counter.increment(),
+        });
+      }
 
       if (fileRejections.length > 0) {
         const TOO_MANY_FILES_CODE = 'too-many-files';

package/src/lib/Dropzone2.tsx

@@ -12,7 +12,7 @@ import type { UploadOptions } from '@availity/upload-core';
 import type { OnSuccessPayload } from 'tus-js-client';
 
 import { FilePickerBtn } from './FilePickerBtn';
-import { dedupeErrors } from './util';
+import { dedupeErrors, formatBytes } from './util';
 import { createCounter, DropzoneContainer, innerBoxStyles, outerBoxStyles } from './Dropzone';
 import type { DropzoneProps } from './Dropzone';
 
@@ -59,6 +59,7 @@ export const Dropzone2 = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -121,10 +122,67 @@ export const Dropzone2 = ({
 
       const previous = watch(name) ?? [];
 
+      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);
+        let sizeCounter = 0;
+
+        // Find the index where we exceed the total size limit
+        const cutoffIndex = acceptedFiles.findIndex((file) => {
+          sizeCounter += file.size;
+          return sizeCounter > availableSize;
+        });
+
+        // If we found files that exceed the limit
+        if (cutoffIndex !== -1) {
+          // Files that fit within the size limit
+          const filesToAdd = acceptedFiles.slice(0, cutoffIndex === 0 ? 0 : cutoffIndex);
+
+          // Create rejection for excess files
+          fileRejections.push({
+            file: acceptedFiles[cutoffIndex],
+            errors: [
+              {
+                code: 'upload-too-large',
+                message: `Total upload size exceeds the limit of ${formatBytes(maxTotalSize)}.`,
+              },
+            ],
+            id: counter.increment(),
+          });
+
+          // Update acceptedFiles to only include files that fit
+          acceptedFiles = filesToAdd;
+        }
+
+        // Calculate size of accepted files for the state update
+        newSize = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
+        setTotalSize((prev) => prev + newSize);
+      }
+
       // Set accepted files to form context
-      const uploads = acceptedFiles.map((file) => startUpload(file, uploadOptions));
+      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(await Promise.all(uploads)));
 
+      // Add rejections for excess files if needed
+      if (maxFiles && acceptedFiles.length > remainingSlots) {
+        fileRejections.push({
+          file: acceptedFiles[remainingSlots], // Use the first excess file
+          errors: [
+            {
+              code: 'too-many-files',
+              message: `Too many files. You may only upload ${maxFiles} file(s).`,
+            },
+          ],
+          id: counter.increment(),
+        });
+      }
+
       if (fileRejections.length > 0) {
         const TOO_MANY_FILES_CODE = 'too-many-files';
         let hasTooManyFiles = false;

package/src/lib/ErrorAlert.tsx

@@ -5,6 +5,7 @@ import { formatBytes } from './util';
 
 const codes: Record<string, string> = {
   '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',

package/src/lib/FileSelector.tsx

@@ -59,6 +59,11 @@ export type FileSelectorProps = {
    * Overrides the standard file size message
    */
   customSizeMessage?: React.ReactNode;
+
+  /**
+   * Overrides the standard total upload size message
+   */
+  customTotalSizeMessage?: React.ReactNode;
   /**
    * Overrides the standard file types message
    */
@@ -98,10 +103,16 @@ export type FileSelectorProps = {
    * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
    */
   maxSize: number;
+  /**
+   * Maximum size allowed for total upload in bytes
+   * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
+   */
+  maxTotalSize?: number;
   /**
    * Whether multiple file selection is allowed
    * @default true
    */
+
   multiple?: boolean;
   /**
    * Callback fired when files are selected
@@ -145,6 +156,7 @@ export const FileSelector = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -155,6 +167,7 @@ export const FileSelector = ({
   label = 'Upload file',
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -240,6 +253,7 @@ export const FileSelector = ({
             enableDropArea={enableDropArea}
             maxFiles={maxFiles}
             maxSize={maxSize}
+            maxTotalSize={maxTotalSize}
             multiple={multiple}
             onChange={onChange}
             onDrop={onDrop}
@@ -250,7 +264,9 @@ export const FileSelector = ({
           <FileTypesMessage
             allowedFileTypes={allowedFileTypes}
             maxFileSize={maxSize}
+            maxTotalSize={maxTotalSize}
             customSizeMessage={customSizeMessage}
+            customTotalSizeMessage={customTotalSizeMessage}
             customTypesMessage={customTypesMessage}
             variant="caption"
           />
@@ -259,9 +275,10 @@ export const FileSelector = ({
       ) : (
         <Grid container rowSpacing={3} flexDirection="column">
           <Grid>
-            <HeaderMessage maxFiles={maxFiles} maxSize={maxSize} />
+            <HeaderMessage maxFiles={maxFiles} maxSize={maxSize} maxTotalSize={maxTotalSize} />
             <FileTypesMessage
               allowedFileTypes={allowedFileTypes}
+              customTotalSizeMessage={customTotalSizeMessage}
               customSizeMessage={customSizeMessage}
               customTypesMessage={customTypesMessage}
               variant="body2"
@@ -276,6 +293,7 @@ export const FileSelector = ({
               enableDropArea={enableDropArea}
               maxFiles={maxFiles}
               maxSize={maxSize}
+              maxTotalSize={maxTotalSize}
               multiple={multiple}
               onChange={onChange}
               onDrop={onDrop}