@availity/mui-file-selector

@availity/mui-file-selector

Availity MUI File Selector component to be used with @availity/element design system.

Documentation

This package extends the MUI File Selector component: MUI File Selector Docs

Live demo and documentation in our Storybook

Availity standards for design and usage can be found in the Availity Design Guide

Installation

Import Through @availity/element (Recommended)

NPM

npm install @availity/element

Yarn

yarn add @availity/element

Direct Import

NPM

This package has a few peer dependencies. Add @mui/material & @emotion/react to your project if not already installed.

npm install @availity/mui-file-selector

Yarn

yarn add @availity/mui-file-selector

Usage

Import through @availity/element

import { FileSelector } from '@availity/element';

Direct import

import { FileSelector } from '@availity/mui-file-selector';

Basic Example

Here's a basic example of how to use the FileSelector component:

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.

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;