@licuido-ui/ui_file-upload v1.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

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