npm package: @licuido-ui/ui_multi-image-upload
Description: The `MultiImageUpload` component is a reusable React component that provides an easy way to handle Multi Image Uploads with various options and features.
Latest version: 3.0.1

# MultiImageUploads

The `MultiImageUpload` component is a reusable React component that provides an easy way to handle Multi Image Uploads with various options and features.

### Author

- @author Vengadesh Pandiyan <vengadesh@crayond.co>

## Link

[Story Book Link EmptyPage](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_multi-image-upload
```

## Import component

```jsx
import { MultiImageUpload } from '@licuido-ui/ui_multi-image-upload';
```

## Usage

```jsx
import React from 'react';
import { Box } from '@mui/material';
import { MultiImageUpload } from '@licuido-ui/ui_multi-image-upload';

const App = () => {
  const handleUpload = (data) => {
    console.log('Uploaded File:', data.updatedFile.file.name);
    console.log('Total Files Selected:', data.totalFile);
  };

  return (
    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <MultiImageUpload
      variant={1}
      setTotalFileSelected={setTotalFileSelected}
      onClickUpload={(e:any, v:any, es:any) => console.log(e, v, es)}
      TotalFileSelected={totalFileSelected}
      maxSize={'1MB'}
      // removeIcon={<DeleteIcon />}
      allowedTypes={['jpg', 'jpeg', 'png', 'svg', 'webp']}
    />
    </Box>
  );
};

export default App;

/>
```

## Image
![alt text](./MultiImageUpload.png)
## Props

| Prop                 | Type                   | Default Value | Description                                                              |
| -------------------- | ---------------------- | ------------- | ------------------------------------------------------------------------ |
| className            | string                 | ''            | Additional CSS class for the component.                                  |
| sx                   | SxProps<Theme>         | {}            | Styling props for the component using Material-UI styling system.        |
| setTotalFileSelected | () => void             | () => {}      | Callback function to set the total selected files.                       |
| onClickUpload        | (data: object) => void | () => {}      | Callback function triggered when a file is uploaded.                     |
| maxSize              | number \| string       | '10MB'        | Maximum allowed file size (formatted string with units like 'MB', 'KB'). |
| rootStyle            | SxProps                | {}            | Styling props for the root container.                                    |
| uploadedCardStyle    | SxProps                | {}            | Styling props for the uploaded card container.                           |
| variant              | 1                      | 1             | Select between two card variants.                                        |
| TotalFileSelected    | any                    | []            | An array of currently selected files.                                    |
| deleteIcon           | React.ReactNode        | &#x2715;      | Icon to be displayed for removing a file.                                |
| allowedTypes         | string[]               | []            | Array of allowed file extensions (e.g., ['jpg', 'pdf']).                 |
| timeout              | number                 | 3000          | Timeout in milliseconds for uploading progress simulation.               |
| deleteIconStyle      | object                 | {}            | Styling props for the delete icon.                                       |
| imageStyles          | object                 | {}            | Styling props for the UploadImage.                                       |