@availity/mui-file-selector 1.7.1 → 1.8.1

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,
@@ -93,6 +94,35 @@ export const Dropzone2 = ({
           message: `Too many files. You may only upload ${maxFiles} file(s).`,
         });
       }
+      
+      // Check for allowed file name characters
+      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',
+          });
+        }
+      }
+      
+      // Explicit check for allowed file types
+      if (allowedFileTypes.length > 0) {
+        const fileName = file.name;
+        const fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+        
+        // Convert all file types to lowercase for comparison
+        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);
@@ -107,7 +137,7 @@ export const Dropzone2 = ({
 
       return errors.length > 0 ? dedupeErrors(errors) : null;
     },
-    [maxFiles, validator]
+    [maxFiles, validator, uploadOptions.allowedFileNameCharacters, allowedFileTypes, watch, name]
   );
 
   const handleOnDrop = useCallback(
@@ -121,10 +151,66 @@ 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);
+        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;
@@ -159,7 +245,7 @@ export const Dropzone2 = ({
       if (setFileRejections) setFileRejections(fileRejections);
       if (onDrop) onDrop(acceptedFiles, fileRejections, event);
     },
-    [setFileRejections]
+    [setFileRejections, setTotalSize, watch, name, maxTotalSize, maxFiles, uploadOptions, setValue, onDrop]
   );
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -190,7 +276,7 @@ export const Dropzone2 = ({
 
   const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
     if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
-    if (onClick) onClick;
+    if (onClick) onClick(event);
   };
 
   const getFieldValue = () => {

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,
@@ -236,10 +249,12 @@ export const FileSelector = ({
           <Dropzone
             name={name}
             allowedFileTypes={allowedFileTypes}
+            allowedFileNameCharacters={allowedFileNameCharacters}
             disabled={disabled}
             enableDropArea={enableDropArea}
             maxFiles={maxFiles}
             maxSize={maxSize}
+            maxTotalSize={maxTotalSize}
             multiple={multiple}
             onChange={onChange}
             onDrop={onDrop}
@@ -250,7 +265,9 @@ export const FileSelector = ({
           <FileTypesMessage
             allowedFileTypes={allowedFileTypes}
             maxFileSize={maxSize}
+            maxTotalSize={maxTotalSize}
             customSizeMessage={customSizeMessage}
+            customTotalSizeMessage={customTotalSizeMessage}
             customTypesMessage={customTypesMessage}
             variant="caption"
           />
@@ -259,9 +276,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"
@@ -272,10 +290,12 @@ export const FileSelector = ({
             <Dropzone
               name={name}
               allowedFileTypes={allowedFileTypes}
+              allowedFileNameCharacters={allowedFileNameCharacters}
               disabled={disabled}
               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>
   );
 };