@availity/mui-file-selector 0.1.3 → 0.2.0

package/src/lib/FilePickerBtn.tsx

@@ -1,14 +1,30 @@
-import { ChangeEvent, MouseEvent, RefObject } from 'react';
+import { ChangeEvent, RefObject } from 'react';
 import type { DropzoneInputProps } from 'react-dropzone';
 import { useFormContext } from 'react-hook-form';
 import { Button, ButtonProps } from '@availity/mui-button';
 import { Input } from '@availity/mui-form-utils';
 
 type FilePickerBtnProps = {
+  /**
+   * Name attribute for the input field, used by react-hook-form for form state management.
+   */
   name: string;
-  maxSize?: number;
+  /**
+   *  Callback function triggered when files are selected through the input.
+   */
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Optional ID attribute for the file input element.
+   */
   inputId?: string;
+  /**
+   * Additional props to customize the underlying input element.
+   */
   inputProps?: DropzoneInputProps & { ref?: RefObject<HTMLInputElement> };
+  /**
+   * Maximum allowed size per file in bytes. Files exceeding this size will be rejected.
+   */
+  maxSize?: number;
 } & Omit<ButtonProps, 'onChange'>;
 
 export const FilePickerBtn = ({
@@ -18,35 +34,13 @@ export const FilePickerBtn = ({
   inputId,
   inputProps = {},
   maxSize,
+  onChange,
   onClick,
   ...rest
 }: FilePickerBtnProps) => {
-  const { register, setValue } = useFormContext();
-
-  const { accept, multiple, ref, style, type: inputType, onChange } = inputProps;
-
-  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target;
-
-    const value: File[] = [];
-    if (files) {
-      // FileList is not iterable. Must use for loop for now
-      for (let i = 0; i < files.length; i++) {
-        if (maxSize) {
-          console.log('file is too big:', files[i].size > maxSize);
-        }
-        value[i] = files[i];
-      }
-    }
-
-    setValue(name, value);
-
-    // if (onChange) onChange(event);
-  };
+  const { register } = useFormContext();
 
-  const handleOnClick = (event: MouseEvent<HTMLButtonElement>) => {
-    if (onClick) onClick(event);
-  };
+  const { accept, multiple, ref, style, type: inputType } = inputProps;
 
   const field = register(name);
 
@@ -54,7 +48,7 @@ export const FilePickerBtn = ({
     <>
       <Input
         {...field}
-        onChange={handleOnChange}
+        onChange={onChange}
         value=""
         inputRef={ref}
         type={inputType}
@@ -66,7 +60,7 @@ export const FilePickerBtn = ({
         }}
         id={inputId}
       />
-      <Button color={color} {...rest} onClick={handleOnClick} fullWidth={false}>
+      <Button color={color} {...rest} onClick={onClick} fullWidth={false}>
         {children}
       </Button>
     </>

package/src/lib/FileSelector.stories.tsx

@@ -3,16 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Paper } from '@availity/mui-paper';
 
-// import { FileSelector, FileSelectorProps } from './FileSelector';
-
-type FileSelectorProps = {
-  name: string;
-};
-
-const FileSelector = (props: FileSelectorProps) => {
-  console.log(props);
-  return <div>placeholder</div>;
-};
+import { FileSelector, FileSelectorProps } from './FileSelector';
 
 const meta: Meta<typeof FileSelector> = {
   title: 'Components/File Selector/File Selector',
@@ -47,12 +38,13 @@ export const _FileSelector: StoryObj<typeof FileSelector> = {
   ),
   args: {
     name: 'file-selector',
-    // allowedFileTypes: ['.txt'],
-    // clientId: '123',
-    // customerId: '456',
-    // bucketId: '789',
-    // maxSize: 1 * 1000 * 1000, // 1MB
-    // isCloud: true,
-    // multiple: true,
+    allowedFileTypes: [],
+    clientId: '123',
+    customerId: '456',
+    bucketId: '789',
+    retryDelays: [],
+    maxSize: 1 * 1024 * 1024, // 1MB
+    isCloud: true,
+    multiple: true,
   },
 };

package/src/lib/FileSelector.tsx

@@ -1,45 +1,130 @@
-import { ReactNode, useState } from 'react';
+import { ChangeEvent, ReactNode, useState } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import type { FileRejection } from 'react-dropzone/typings/react-dropzone';
-import Upload, { Options } from '@availity/upload-core';
+import { useQueryClient } from '@tanstack/react-query';
+import Upload, { UploadOptions } from '@availity/upload-core';
+import { Button } from '@availity/mui-button';
+import { Grid } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
 
 import { Dropzone } from './Dropzone';
+import { ErrorAlert } from './ErrorAlert';
 import { FileList } from './FileList';
 import { FileTypesMessage } from './FileTypesMessage';
-import { useUploadCore } from './useUploadCore';
-import { Typography } from '@availity/mui-typography';
 
 const CLOUD_URL = '/cloud/web/appl/vault/upload/v1/resumable';
 
 export type FileSelectorProps = {
+  /**
+   * Name attribute for the form field. Used by react-hook-form for form state management
+   * and must be unique within the form context
+   */
   name: string;
+  /**
+   * The ID of the bucket where files will be uploaded
+   */
   bucketId: string;
+  /**
+   * The customer ID associated with the upload
+   */
   customerId: string;
+  /**
+   * Regular expression pattern of allowed characters in file names
+   * @example "a-zA-Z0-9-_."
+   */
   allowedFileNameCharacters?: string;
+  /**
+   * List of allowed file extensions. Each extension must start with a dot
+   * @example ['.pdf', '.doc', '.docx']
+   * @default []
+   */
   allowedFileTypes?: `.${string}`[];
+  /**
+   * Optional content to render below the file upload area
+   */
   children?: ReactNode;
+  /**
+   * Client identifier used for upload authentication
+   */
   clientId: string;
-  deliverFileOnSubmit?: boolean;
-  deliveryChannel?: string;
+  /**
+   * Whether the file selector is disabled
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Custom endpoint URL for file uploads. If not provided, default endpoint will be used
+   */
   endpoint?: string;
-  fileDeliveryMetadata?: Record<string, unknown> | ((file: Upload) => Record<string, unknown>);
-  getDropRejectionMessages?: (rejections: FileRejection[]) => void;
+  /**
+   * Whether to use the cloud upload endpoint
+   * When true, uses '/cloud/web/appl/vault/upload/v1/resumable'
+   */
   isCloud?: boolean;
+  /**
+   * Label text or element displayed above the upload area
+   * @default 'Upload file'
+   */
   label?: ReactNode;
+  /**
+   * Maximum number of files that can be uploaded simultaneously
+   */
   maxFiles?: number;
+  /**
+   * Maximum file size allowed per file in bytes
+   * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
+   */
   maxSize: number;
+  /**
+   * Whether multiple file selection is allowed
+   * @default true
+   */
   multiple?: boolean;
-  onDeliveryError?: (error: unknown) => void;
-  onDeliverySuccess?: () => void;
-  onSubmit?: (values: Record<string, unknown>) => void;
-  onSuccess?: (() => void)[];
-  onError?: ((error: Error) => void)[];
+  /**
+   * Callback fired when files are selected
+   * @param event - The change event containing the selected file(s)
+   */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Callback fired when the form is submitted
+   * @param uploads - Array of Upload instances for the submitted files
+   * @param values - Object containing the form values, with files indexed by the name prop
+   */
+  onSubmit?: (uploads: Upload[], values: Record<string, File[]>) => void;
+  /**
+   * Callback fired when a file is successfully uploaded
+   */
+  onSuccess?: UploadOptions['onSuccess'];
+  /**
+   * Callback fired when an error occurs during upload
+   */
+  onError?: UploadOptions['onError'];
+  /**
+   * Array of functions to execute before file upload begins.
+   * Each function should return a boolean indicating whether to proceed with the upload.
+   * @default []
+   */
   onFilePreUpload?: (() => boolean)[];
-  onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
-  onFileDelivery?: (upload: Upload) => void;
+  /**
+   * Callback fired when a file is removed from the upload list
+   * @param files - Array of remaining files
+   * @param removedUploadId - ID of the removed upload
+   */
+  onUploadRemove?: (files: File[], removedUploadId: string) => void;
+  /**
+   * Array of delays (in milliseconds) between upload retry attempts
+   */
+  retryDelays?: UploadOptions['retryDelays'];
 };
 
+// Below props were removed from availity-react version. Perserving here in case needed later
+// deliverFileOnSubmit?: boolean;
+// deliveryChannel?: string;
+// fileDeliveryMetadata?: Record<string, unknown> | ((file: Upload) => Record<string, unknown>);
+// onDeliveryError?: (error: unknown) => void;
+// onDeliverySuccess?: () => void;
+// onFileDelivery?: (upload: Upload) => void;
+
 export const FileSelector = ({
   name,
   allowedFileNameCharacters,
@@ -48,36 +133,33 @@ export const FileSelector = ({
   clientId,
   children,
   customerId,
-  deliverFileOnSubmit = false,
-  deliveryChannel,
   disabled = false,
   endpoint,
-  fileDeliveryMetadata,
-  getDropRejectionMessages,
   isCloud,
   label = 'Upload file',
-  maxFiles = 1,
+  maxFiles,
   maxSize,
   multiple = true,
-  // onDeliveryError,
-  // onDeliverySuccess,
+  onChange,
   onSubmit,
   onSuccess,
   onError,
   onFilePreUpload = [],
   onUploadRemove,
-  onFileDelivery,
+  retryDelays,
 }: FileSelectorProps) => {
-  // const classes = classNames(
-  //   className,
-  //   metadata.touched ? 'is-touched' : 'is-untouched',
-  //   metadata.touched && metadata.error && 'is-invalid'
-  // );
   const [totalSize, setTotalSize] = useState(0);
+  const [fileRejections, setFileRejections] = useState<(FileRejection & { id: number })[]>([]);
+
+  const client = useQueryClient();
 
-  const methods = useForm();
+  const methods = useForm({
+    defaultValues: {
+      [name]: [] as File[],
+    },
+  });
 
-  const options: Options = {
+  const options: UploadOptions = {
     bucketId,
     customerId,
     clientId,
@@ -86,62 +168,86 @@ export const FileSelector = ({
     allowedFileNameCharacters,
     onError,
     onSuccess,
+    retryDelays,
   };
 
   if (onFilePreUpload) options.onPreStart = onFilePreUpload;
   if (endpoint) options.endpoint = endpoint;
   if (isCloud) options.endpoint = CLOUD_URL;
 
-  const { data: uploads = [] } = useUploadCore(methods.watch(name) || [], options);
+  const handleOnRemoveFile = (uploadId: string, upload: Upload) => {
+    const prevFiles = methods.watch(name);
+    const newFiles = prevFiles.filter((file) => file.name !== upload.file.name);
 
-  const handleOnRemoveFile = (uploadId: string) => {
-    const newFiles = uploads.filter((upload) => upload.id !== uploadId);
-
-    if (newFiles.length !== uploads.length) {
-      const removedFile = uploads.find((upload) => upload.id === uploadId);
+    if (newFiles.length !== prevFiles.length) {
+      const removedFile = prevFiles.find((file) => file.name === upload.file.name);
 
       methods.setValue(name, newFiles);
 
-      if (!removedFile?.error && !removedFile?.errorMessage && removedFile?.file.size)
-        setTotalSize(totalSize - removedFile.file.size);
+      if (removedFile?.size) setTotalSize(totalSize - removedFile.size);
+
       if (onUploadRemove) onUploadRemove(newFiles, uploadId);
     }
   };
 
-  const handleOSubmit = (values: Record<string, unknown>) => {
-    if (onSubmit) onSubmit(values);
+  const files = methods.watch(name);
+
+  const handleOnSubmit = (values: Record<string, File[]>) => {
+    if (values[name].length === 0) return;
+
+    const queries = client.getQueriesData<Upload>(['upload']);
+    const uploads = [];
+    for (const [, data] of queries) {
+      if (data) uploads.push(data);
+    }
+
+    if (onSubmit) onSubmit(uploads, values);
+  };
+
+  const handleRemoveRejection = (id: number) => {
+    const rejections = fileRejections.filter((value) => value.id !== id);
+    setFileRejections(rejections);
   };
 
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(handleOSubmit)}>
+      <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
         <>
           <Typography>{label}</Typography>
           <Dropzone
             name={name}
-            allowedFileNameCharacters={allowedFileNameCharacters}
             allowedFileTypes={allowedFileTypes}
-            bucketId={bucketId}
-            clientId={clientId}
-            customerId={customerId}
-            deliverFileOnSubmit={deliverFileOnSubmit}
-            deliveryChannel={deliveryChannel}
             disabled={disabled}
-            endpoint={endpoint}
-            fileDeliveryMetadata={fileDeliveryMetadata}
-            getDropRejectionMessages={getDropRejectionMessages}
-            isCloud={isCloud}
+            maxFiles={maxFiles}
             maxSize={maxSize}
             multiple={multiple}
-            // onDeliveryError={onDeliveryError}
-            // onDeliverySuccess={onDeliverySuccess}
-            onFilePreUpload={onFilePreUpload}
-            onFileDelivery={onFileDelivery}
+            onChange={onChange}
+            setFileRejections={setFileRejections}
+            setTotalSize={setTotalSize}
           />
           <FileTypesMessage allowedFileTypes={allowedFileTypes} maxFileSize={maxSize} />
         </>
         {children}
-        <FileList uploads={uploads} onRemoveFile={handleOnRemoveFile} />
+
+        {fileRejections.length > 0
+          ? fileRejections.map((rejection) => (
+              <ErrorAlert
+                key={rejection.id}
+                errors={rejection.errors}
+                fileName={rejection.file.name}
+                id={rejection.id}
+                onClose={() => handleRemoveRejection(rejection.id)}
+              />
+            ))
+          : null}
+        <FileList files={files} options={options} onRemoveFile={handleOnRemoveFile} />
+        {files.length > 0 && (
+          <Grid xs={12} justifyContent="end" display="flex" paddingTop={2.5}>
+            <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+              Submit
+            </Button>
+          </Grid>
+        )}
       </form>
     </FormProvider>
   );

package/src/lib/FileTypesMessage.test.tsx

@@ -8,4 +8,10 @@ describe('FileTypesMessage', () => {
 
     expect(screen.getByText(/All file types allowed/)).toBeTruthy();
   });
+
+  test('should show file size', () => {
+    render(<FileTypesMessage allowedFileTypes={[]} maxFileSize={1000} />);
+
+    expect(screen.getByText(/Maximum file size is/)).toBeTruthy();
+  });
 });

package/src/lib/FileTypesMessage.tsx

@@ -3,7 +3,13 @@ import { Typography } from '@availity/mui-typography';
 import { formatBytes } from './util';
 
 type FileTypesMessageProps = {
+  /**
+   * Allowed file type extensions. Each extension should be prefixed with a ".". eg: .txt, .pdf, .png
+   */
   allowedFileTypes: `.${string}`[];
+  /**
+   * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
+   */
   maxFileSize: number;
 };
 

package/src/lib/HeaderMessage.tsx

@@ -3,7 +3,13 @@ import { Typography } from '@availity/mui-typography';
 import { formatBytes } from './util';
 
 export type HeaderMessageProps = {
+  /**
+   * Maximum number of files allowed
+   */
   maxFiles: number;
+  /**
+   * Maximum combined total size of all files
+   */
   maxSize: number;
 };
 

package/src/lib/UploadProgressBar.test.tsx

@@ -20,4 +20,21 @@ describe('UploadProgressBar', () => {
 
     expect(screen.getByText('50%')).toBeTruthy();
   });
+
+  test('should show error message', () => {
+    const mockUpload: unknown = {
+      onProgress: [],
+      onError: [],
+      onSuccess: [],
+      errorMessage: 'error message',
+      file: {
+        name: 'test',
+      },
+      percentage: 0,
+    };
+
+    render(<UploadProgressBar upload={mockUpload as Upload} />);
+
+    expect(screen.getByText('error message')).toBeTruthy();
+  });
 });

package/src/lib/UploadProgressBar.tsx

@@ -6,13 +6,21 @@ import { Typography } from '@availity/mui-typography';
 import { WarningTriangleIcon } from '@availity/mui-icon';
 
 export type UploadProgressBarProps = {
-  /** The upload instance returned by creating a new Upload via @availity/upload-core. */
+  /**
+   * The upload instance returned by creating a new Upload via @availity/upload-core.
+   */
   upload: Upload;
-  /** Callback function to hook into the onProgress within the Upload instance provided in the upload prop. */
+  /**
+   * Callback function to hook into the onProgress within the Upload instance provided in the upload prop.
+   */
   onProgress?: (upload: Upload) => void;
-  /** Callback function to hook into the onSuccess within the Upload instance provided in the upload prop. */
+  /**
+   * Callback function to hook into the onSuccess within the Upload instance provided in the upload prop.
+   */
   onSuccess?: (upload: Upload) => void;
-  /** Callback function to hook into the onError within the Upload instance provided in the upload prop. */
+  /**
+   * Callback function to hook into the onError within the Upload instance provided in the upload prop.
+   */
   onError?: (upload: Upload) => void;
 };
 

package/src/lib/useFileDelivery.tsx

@@ -4,14 +4,23 @@ import Upload from '@availity/upload-core';
 import { AxiosResponse } from 'axios';
 
 export type UploadDeliveryOptions = {
+  /** ID of the vault bucket */
   bucketId: string;
+  /** Client ID to be attached to the request */
   clientId: string;
+  /** Customer ID of the organization submitting the request */
   customerId: string;
+  /** Delivery Channel for the AvFileDeliveryApi */
   deliveryChannel?: string;
+  /** Determine whether AvFileDeliveryApi should be automatically called or if the component should wait */
   deliverFileOnSubmit?: boolean;
+  /** Metadata to be sent with the request. Can be an object or function that returns an object */
   fileDeliveryMetadata?: Record<string, unknown> | ((upload: Upload) => Record<string, unknown>);
+  /** Callback function for when the upload succeeds */
   onSuccess?: (responses: unknown[]) => void;
+  /** Callback function for when the upload fails */
   onError?: (responses: unknown[]) => void;
+  /** The upload instance returned by creating a new Upload via @availity/upload-core. */
   uploads: Upload[];
 };
 
@@ -22,8 +31,8 @@ export function useFileDelivery({
   deliveryChannel,
   deliverFileOnSubmit,
   fileDeliveryMetadata,
-  onSuccess,
-  onError,
+  // onSuccess,
+  // onError,
   uploads,
 }: UploadDeliveryOptions) {
   const errors = {};

package/src/lib/useUploadCore.tsx

@@ -1,22 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
-import Upload, { Options } from '@availity/upload-core';
+import Upload, { UploadOptions } from '@availity/upload-core';
 
-function startUploads(files: File[], options: Options) {
-  return files.map((file) => {
-    const upload = new Upload(file, options);
+function startUpload(file: File, options: UploadOptions) {
+  const upload = new Upload(file, options);
 
-    upload.start();
+  upload.start();
 
-    return upload;
-  });
+  return upload;
 }
 
-export function useUploadCore(files: File[], options: Options) {
-  const fileNames = files.map((file) => file.name).join(',');
-
-  const isQueryEnabled = files.length > 0;
+export function useUploadCore(file: File, options: UploadOptions) {
+  const isQueryEnabled = !!file;
 
-  return useQuery(['upload', fileNames, options], () => startUploads(files, options), {
+  return useQuery(['upload', file.name, options], () => startUpload(file, options), {
     enabled: isQueryEnabled,
     retry: false,
   });

package/src/lib/util.ts

@@ -1,7 +1,7 @@
 export function formatBytes(bytes: number, decimals = 2) {
   if (!+bytes) return '0 Bytes';
 
-  const k = 1000;
+  const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ['Bytes', 'KB', 'MB', 'GB'];