@availity/mui-file-selector 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.3](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.3.2...@availity/mui-file-selector@0.3.3) (2025-02-19)
+
+### Dependency Updates
+
+* `mui-progress` updated to version `0.3.2`
+## [0.3.2](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.3.1...@availity/mui-file-selector@0.3.2) (2025-02-19)
+
+
+### Bug Fixes
+
+* update types and add docs ([c3f9f9e](https://github.com/Availity/element/commit/c3f9f9e1d0946ae5d0a03eab5b250ec47a0c3aab))
+
 ## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@0.3.0...@availity/mui-file-selector@0.3.1) (2025-02-18)
 
 ### Dependency Updates

package/README.md

@@ -59,3 +59,70 @@ import { FileSelector } from '@availity/element';
 ```tsx
 import { FileSelector } from '@availity/mui-file-selector';
 ```
+
+#### Basic Example
+
+Here's a basic example of how to use the FileSelector component:
+
+```tsx
+import React from 'react';
+import { FileSelector } from '@availity/mui-file-selector';
+
+const MyComponent = () => {
+  const handleSubmit = (uploads, values) => {
+    console.log('Submitted files:', uploads);
+    console.log('Form values:', values);
+  };
+
+  return (
+    <FileSelector
+      name="myFiles"
+      bucketId="your-bucket-id"
+      customerId="your-customer-id"
+      clientId="your-client-id"
+      maxSize={5 * 1024 * 1024} // 5MB
+      allowedFileTypes={['.pdf', '.doc', '.docx']}
+      maxFiles={3}
+      onSubmit={handleSubmit}
+    />
+  );
+};
+
+export default MyComponent;
+```
+
+#### Advanced Examples
+
+The `onSuccess` and `onError` callbacks are available to use to add logic for after the file is uploaded or in the event there is an error with the api call.
+
+```tsx
+import React from 'react';
+import { FileSelector } from '@availity/mui-file-selector';
+
+const MyFileUploadComponent = () => {
+  const handleSuccess = () => {
+    // Handle successful upload - e.g., show success message, update UI
+  };
+
+  const handleError = (error) => {
+    // Handle upload error - e.g., show error message, retry upload
+  };
+
+  return (
+    <FileSelector
+      name="documentUpload"
+      bucketId="your-bucket-id"
+      customerId="your-customer-id"
+      clientId="your-client-id"
+      maxSize={10 * 1024 * 1024} // 10MB
+      allowedFileTypes={['.pdf', '.doc', '.docx']}
+      multiple={true}
+      maxFiles={5}
+      onSuccess={handleSuccess}
+      onError={handleError}
+    />
+  );
+};
+
+export default MyFileUploadComponent;
+```

package/dist/index.d.mts

@@ -82,11 +82,11 @@ type FileSelectorProps = {
     /**
      * Callback fired when a file is successfully uploaded
      */
-    onSuccess?: UploadOptions['onSuccess'];
+    onSuccess?: () => void;
     /**
      * Callback fired when an error occurs during upload
      */
-    onError?: UploadOptions['onError'];
+    onError?: (error: Error) => void;
     /**
      * Array of functions to execute before file upload begins.
      * Each function should return a boolean indicating whether to proceed with the upload.

package/dist/index.d.ts

@@ -82,11 +82,11 @@ type FileSelectorProps = {
     /**
      * Callback fired when a file is successfully uploaded
      */
-    onSuccess?: UploadOptions['onSuccess'];
+    onSuccess?: () => void;
     /**
      * Callback fired when an error occurs during upload
      */
-    onError?: UploadOptions['onError'];
+    onError?: (error: Error) => void;
     /**
      * Array of functions to execute before file upload begins.
      * Each function should return a boolean indicating whether to proceed with the upload.

package/dist/index.js

@@ -383,8 +383,13 @@ var import_react_query = require("@tanstack/react-query");
 var import_upload_core = __toESM(require("@availity/upload-core"));
 function startUpload(file, options) {
   return __async(this, null, function* () {
-    const upload = new import_upload_core.default(file, options);
+    const _a = options, { onSuccess, onError } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError"]);
+    const upload = new import_upload_core.default(file, uploadOptions);
     yield upload.generateId();
+    if (onSuccess)
+      upload.onSuccess.push(onSuccess);
+    if (onError)
+      upload.onError.push(onError);
     upload.start();
     return upload;
   });
@@ -393,7 +398,8 @@ function useUploadCore(file, options) {
   const isQueryEnabled = !!file;
   return (0, import_react_query.useQuery)(["upload", file.name, options], () => startUpload(file, options), {
     enabled: isQueryEnabled,
-    retry: false
+    retry: false,
+    refetchOnWindowFocus: false
   });
 }
 

package/dist/index.mjs

@@ -360,8 +360,13 @@ import { useQuery } from "@tanstack/react-query";
 import Upload from "@availity/upload-core";
 function startUpload(file, options) {
   return __async(this, null, function* () {
-    const upload = new Upload(file, options);
+    const _a = options, { onSuccess, onError } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError"]);
+    const upload = new Upload(file, uploadOptions);
     yield upload.generateId();
+    if (onSuccess)
+      upload.onSuccess.push(onSuccess);
+    if (onError)
+      upload.onError.push(onError);
     upload.start();
     return upload;
   });
@@ -370,7 +375,8 @@ function useUploadCore(file, options) {
   const isQueryEnabled = !!file;
   return useQuery(["upload", file.name, options], () => startUpload(file, options), {
     enabled: isQueryEnabled,
-    retry: false
+    retry: false,
+    refetchOnWindowFocus: false
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -48,13 +48,12 @@
     "@availity/mui-icon": "^0.14.0",
     "@availity/mui-layout": "^0.3.0",
     "@availity/mui-list": "^0.3.0",
-    "@availity/mui-progress": "^0.5.0",
+    "@availity/mui-progress": "^0.5.1",
     "@availity/mui-typography": "^0.3.0",
-    "@availity/upload-core": "7.0.0-alpha.6",
+    "@availity/upload-core": "^7.0.1",
     "@tanstack/react-query": "^4.36.1",
     "react-dropzone": "^11.7.1",
     "react-hook-form": "^7.51.3",
-    "tus-js-client": "4.2.3",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

package/src/lib/FileList.tsx

@@ -1,4 +1,4 @@
-import type { default as Upload, UploadOptions } from '@availity/upload-core';
+import type { default as Upload } from '@availity/upload-core';
 import { List, ListItem, ListItemText, ListItemIcon } from '@availity/mui-list';
 import { IconButton } from '@availity/mui-button';
 import { DeleteIcon } from '@availity/mui-icon';
@@ -7,7 +7,7 @@ import { Divider } from '@availity/mui-divider';
 
 import { UploadProgressBar } from './UploadProgressBar';
 import { formatBytes, getFileExtIcon } from './util';
-import { useUploadCore } from './useUploadCore';
+import { useUploadCore, Options } from './useUploadCore';
 
 type FileRowProps = {
   /** The File object containing information about the uploaded file */
@@ -19,7 +19,7 @@ type FileRowProps = {
    */
   onRemoveFile: (id: string, upload: Upload) => void;
   /** Configuration options for the upload process */
-  options: UploadOptions;
+  options: Options;
 };
 
 const FileRow = ({ file, options, onRemoveFile }: FileRowProps) => {
@@ -78,7 +78,7 @@ export type FileListProps = {
   /**
    * Configuration options applied to all file uploads in the list
    */
-  options: UploadOptions;
+  options: Options;
 };
 
 export const FileList = ({ files, options, onRemoveFile }: FileListProps) => {

package/src/lib/FileSelector.stories.tsx

@@ -31,11 +31,13 @@ const meta: Meta<typeof FileSelector> = {
 export default meta;
 
 export const _FileSelector: StoryObj<typeof FileSelector> = {
-  render: (props: FileSelectorProps) => (
-    <Paper sx={{ padding: '2rem' }}>
-      <FileSelector {...props} />
-    </Paper>
-  ),
+  render: (props: FileSelectorProps) => {
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FileSelector {...props} />
+      </Paper>
+    );
+  },
   args: {
     name: 'file-selector',
     allowedFileTypes: [],

package/src/lib/FileSelector.tsx

@@ -11,6 +11,7 @@ import { Dropzone } from './Dropzone';
 import { ErrorAlert } from './ErrorAlert';
 import { FileList } from './FileList';
 import { FileTypesMessage } from './FileTypesMessage';
+import { Options } from './useUploadCore';
 
 const CLOUD_URL = '/cloud/web/appl/vault/upload/v1/resumable';
 
@@ -94,11 +95,11 @@ export type FileSelectorProps = {
   /**
    * Callback fired when a file is successfully uploaded
    */
-  onSuccess?: UploadOptions['onSuccess'];
+  onSuccess?: () => void;
   /**
    * Callback fired when an error occurs during upload
    */
-  onError?: UploadOptions['onError'];
+  onError?: (error: Error) => void;
   /**
    * Array of functions to execute before file upload begins.
    * Each function should return a boolean indicating whether to proceed with the upload.
@@ -159,7 +160,7 @@ export const FileSelector = ({
     },
   });
 
-  const options: UploadOptions = {
+  const options: Options = {
     bucketId,
     customerId,
     clientId,

package/src/lib/useUploadCore.tsx

@@ -1,21 +1,31 @@
 import { useQuery } from '@tanstack/react-query';
 import Upload, { UploadOptions } from '@availity/upload-core';
 
-async function startUpload(file: File, options: UploadOptions) {
-  const upload = new Upload(file, options);
+export type Options = {
+  onError?: (error: Error) => void;
+  onSuccess?: () => void;
+} & UploadOptions;
+
+async function startUpload(file: File, options: Options) {
+  const { onSuccess, onError, ...uploadOptions } = options;
+  const upload = new Upload(file, uploadOptions);
 
   await upload.generateId();
 
+  if (onSuccess) upload.onSuccess.push(onSuccess);
+  if (onError) upload.onError.push(onError);
+
   upload.start();
 
   return upload;
 }
 
-export function useUploadCore(file: File, options: UploadOptions) {
+export function useUploadCore(file: File, options: Options) {
   const isQueryEnabled = !!file;
 
   return useQuery(['upload', file.name, options], () => startUpload(file, options), {
     enabled: isQueryEnabled,
     retry: false,
+    refetchOnWindowFocus: false,
   });
 }