@availity/mui-file-selector 1.7.1 → 1.8.0

package/src/lib/FileSelector2.tsx

@@ -37,6 +37,7 @@ export const FileSelector2 = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -47,6 +48,7 @@ export const FileSelector2 = ({
   label = 'Upload file',
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -129,6 +131,7 @@ export const FileSelector2 = ({
             enableDropArea={enableDropArea}
             maxFiles={maxFiles}
             maxSize={maxSize}
+            maxTotalSize={maxTotalSize}
             multiple={multiple}
             onChange={onChange}
             onDrop={onDrop}
@@ -140,7 +143,9 @@ export const FileSelector2 = ({
           <FileTypesMessage
             allowedFileTypes={allowedFileTypes}
             maxFileSize={maxSize}
+            maxTotalSize={maxTotalSize}
             customSizeMessage={customSizeMessage}
+            customTotalSizeMessage={customTotalSizeMessage}
             customTypesMessage={customTypesMessage}
             variant="caption"
           />
@@ -149,10 +154,11 @@ export const FileSelector2 = ({
       ) : (
         <Grid container rowSpacing={3} flexDirection="column">
           <Grid>
-            <HeaderMessage maxFiles={maxFiles} maxSize={maxSize} />
+            <HeaderMessage maxFiles={maxFiles} maxSize={maxSize} maxTotalSize={maxTotalSize} />
             <FileTypesMessage
               allowedFileTypes={allowedFileTypes}
               customSizeMessage={customSizeMessage}
+              customTotalSizeMessage={customTotalSizeMessage}
               customTypesMessage={customTypesMessage}
               variant="body2"
             />
@@ -166,6 +172,7 @@ export const FileSelector2 = ({
               enableDropArea={enableDropArea}
               maxFiles={maxFiles}
               maxSize={maxSize}
+              maxTotalSize={maxTotalSize}
               multiple={multiple}
               onChange={onChange}
               onDrop={onDrop}

package/src/lib/FileTypesMessage.tsx

@@ -11,6 +11,10 @@ export type FileTypesMessageProps = {
    * 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
    */
@@ -19,19 +23,28 @@ export type FileTypesMessageProps = {
    * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
    */
   maxFileSize?: number;
+  /**
+   * Maximum size of the total upload in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
+   */
+  maxTotalSize?: number;
   variant?: 'caption' | 'body2';
 };
 
 export const FileTypesMessage = ({
   allowedFileTypes = [],
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   maxFileSize,
+  maxTotalSize,
   variant = 'caption',
 }: FileTypesMessageProps) => {
   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
@@ -40,6 +53,7 @@ export const FileTypesMessage = ({
   return (
     <Typography variant={variant}>
       {fileSizeMsg}
+      {totalFileSizeMsg}
       {fileTypesMsg}
     </Typography>
   );

package/src/lib/HeaderMessage.tsx

@@ -8,15 +8,20 @@ export type HeaderMessageProps = {
    */
   maxFiles: number;
   /**
-   * Maximum combined total size of all files
+   * Maximum size of each file
    */
   maxSize: number;
+  /**
+   * Maximum combined total size of all files
+   */
+  maxTotalSize?: number;
 };
 
-export const HeaderMessage = ({ maxFiles, maxSize }: HeaderMessageProps) => {
+export const HeaderMessage = ({ maxFiles, maxSize, maxTotalSize }: HeaderMessageProps) => {
   return (
     <Typography variant="h6">
-      Attach up to {maxFiles} file(s), with a maximum individual size of {formatBytes(maxSize)}
+      Attach up to {maxFiles} file(s), with a maximum individual size of {formatBytes(maxSize)}{' '}
+      {maxTotalSize && `and a maximum total size of ${formatBytes(maxTotalSize)}`}
     </Typography>
   );
 };