npm package: @licuido-ui/ui_file-upload
Description: The `FileUpload` component is a reusable React component that provides an easy way to handle file uploads with various options and features.
Latest version: 1.0.10

# FileUpload

The `FileUpload` component is a reusable React component that provides an easy way to handle file uploads with various options and features.

### Author

- @author Akila K <akila@crayond.co>


### Modified
- @modified Vengadesh Pandiyan S <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_file-upload
```

## Import component

```jsx
import { FileUpload } from '@licuido-ui/ui_file-upload';
```

## Usage

```jsx
import React from 'react';
import { Box } from '@mui/material';
import { FileUpload } from '@licuido-ui/ui_file-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' }}>
      <FileUpload
        icon={<span>+</span>}
        onClickUpload={handleUpload}
        maxSize="5MB"
        allowedTypes={['jpg', 'jpeg', 'png', 'pdf']}
        svgIcon={<span>SVG</span>}
        pdfIcon={<span>PDF</span>}
        imgIcon={<span>IMG</span>}
        closeIcon={<span>Close</span>}
      />
    </Box>
  );
};

export default App;

/>
```

## Image
![alt text](./fileUpload1.png)
![alt text](./fileUpload2.png)
![alt text](./fileUpload3.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.         |
| icon                        | React.ReactNode        | null                            | Icon to be displayed inside the upload area.                              |
| setTotalFileSelected        | () => void             | () => {}                        | Callback function to set the total selected files.                        |
| placeHolder                 | string                 | 'Drag and drop your files here' | Placeholder text displayed inside the upload area.                        |
| 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').  |
| isMultiple                  | true \| false          | true                            | Allow multiple file selection.                                            |
| rootStyle                   | SxProps                | {}                              | Styling props for the root container.                                     |
| cardStyle                   | SxProps                | {}                              | Styling props for the upload card container.                              |
| UploadIconStyle             | SxProps                | {}                              | Styling props for the upload icon.                                        |
| placeHolderStyle            | SxProps                | {}                              | Styling props for the placeholder text.                                   |
| uploadedCardStyle           | SxProps                | {}                              | Styling props for the uploaded card container.                            |
| uploadedFileBoxStyle        | SxProps                | {}                              | Styling props for the uploaded file icon container.                       |
| docIconStyle                | SxProps                | {}                              | Styling props for the file type icon container.                           |
| fileTitleStyle              | SxProps                | {}                              | Styling props for the file title text.                                    |
| fileSizeStyle               | SxProps                | {}                              | Styling props for the file size text.                                     |
| fileRemoveIconStyle         | SxProps                | {}                              | Styling props for the file remove icon container.                         |
| variant                     | 1 \| 2                 | 3                               | 1                                                                         | Select between two card variants. |
| TotalFileSelected           | any                    | []                              | An array of currently selected files.                                     |
| removeIcon                  | React.ReactNode        | &#x2715;                        | Icon to be displayed for removing a file.                                 |
| allowedTypes                | string[]               | []                              | Array of allowed file extensions (e.g., ['jpg', 'pdf']).                  |
| uploadErrorStyle            | object                 | {}                              | Styling props for the upload error message container.                     |
| timeout                     | number                 | 3000                            | Timeout in milliseconds for uploading progress simulation.                |
| errorMsgStyle               | object                 | {}                              | Styling props for the error message container.                            |
| fileSizeErrorMsg            | string                 | 'File size exceeds the limit'   | Error message displayed when a file exceeds the size limit.               |
| fileTypeErrorMsg            | string                 | 'Invalid file type'             | Error message displayed when a file type is not allowed.                  |
| svgIcon                     | ReactElement           | null                            | Icon element for SVG files.                                               |
| pdfIcon                     | ReactElement           | null                            | Icon element for PDF files.                                               |
| imgIcon                     | ReactElement           | null                            | Icon element for image files (JPG, JPEG, PNG).                            |
| closeIcon                   | ReactElement           | &#x2716;                        | Icon element for closing a file upload entry.                             |
| deleteIconStyle             | object                 | {}                              | Styling props for the delete icon.                                        |
| closeIconStyle              | object                 | {}                              | Styling props for the close icon.                                         |
| acceptFiles                 | string[]               | []                              | Array of accepted file types in the input field (e.g., ['.jpg', '.png']). |
| inputAccept                 | string                 | ''                              | Accept attribute value for the input                                      |
| element (e.g., 'image/\*'). |
| uploadButtonText            | string                 | ''                              | Text For The Upload Button                                                |
| uploadButtonStyle           | object                 | {}                              | Styling props for the Upload Button                                       |
| isOrPlaceholderStyle        | object                 | {}                              | Styling props for the isOrPlaceholderStyle                                |
| isOrPlaceholder             | boolean                | False                           | Allow The Text OR                                                         |
| isOrPlaceholderText         | string                 | or                              | String Declares the text or                                               |
| isOrPlaceholderStyle        | object                 | {}                              | Styling props for the                                                     |
| bottomRenderComponent       | ReactNode              | ReactNode                       | Allow The React Component                                                 |
| bottomRenderComponentStyle  | SxProps                | SxProps                         | Allow The styles props                                                    |
| bottomTextLabel             | string                 | string                          | Allow The Text props                                                      |
| bottomTextLabelStyle        | sxProps                | sxProps                         | Allow The style props                                                     |
| isUploadError               | boolean                | False                           | error throwing for file upload                                            |