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 [email protected]

Modified

• @modified Vengadesh Pandiyan S [email protected]

Link

Story Book Link EmptyPage

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_file-upload

Import component

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

Usage

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

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 |