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

Link

Story Book Link EmptyPage

PlayGround

Try it have a fun codeBox

Installation

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

Import component

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

Usage

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

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. | | 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 | ✕ | 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. |