@availity/mui-file-selector 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -51,6 +51,7 @@
     "@availity/mui-progress": "^1.0.3",
     "@availity/mui-typography": "^1.0.2",
     "@availity/upload-core": "^8.0.0",
+    "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.55.0",
     "tus-js-client": "4.3.1",

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}

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>
   );
 };