Link

Story Book Link EmptyPage

$3

Try it have a fun codeBox

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 (

icon={+}
onClickUpload={handleUpload}
maxSize="5MB"
allowedTypes={['jpg', 'jpeg', 'png', 'pdf']}
svgIcon={SVG}
pdfIcon={PDF}
imgIcon={IMG}
closeIcon={Close}
/>

);
};

export default App;

/>
``

Image

Props

| Prop | Type | Default Value | Description |
| --------------------------- | ---------------------- | ------------------------------- | ------------------------------------------------------------------------- |
| className | string | '' | Additional CSS class for the component. |
| sx | SxProps | {} | 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 | ✕ | 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 | ✖ | 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 |