Untitled

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Typography, Box } from '@mui/material';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';

const styles = {
  uploadBox: {
    border: '2px dashed #0288d1',
    padding: '30px',
    textAlign: 'center',
    borderRadius: '10px',
    backgroundColor: '#f5f5f5', // Light background for the upload box
  },
  icon: {
    fontSize: '50px',
    color: '#0288d1',
  },
  text: {
    color: '#000000', // Text color
  },
  filename: {
    marginTop: '10px',
    color: '#0288d1', // Filename color
    fontWeight: 'bold',
  },
};

function FileUpload({ inputFile, setInputFile }) {
  const onDrop = useCallback((acceptedFiles) => {
    setInputFile(acceptedFiles[0]);
  }, [setInputFile]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <Box {...getRootProps()} style={styles.uploadBox}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <Typography variant="body1" style={styles.text}>Drop the files here...</Typography>
      ) : (
        <Box>
          <CloudUploadIcon style={styles.icon} />
          <Typography variant="body1" style={{ ...styles.text, marginTop: '10px' }}>
            Drag & drop some files here, or click to select files
          </Typography>
          {inputFile && (
            <Typography variant="body2" style={styles.filename}>
              {inputFile.name}
            </Typography>
          )}
        </Box>
      )}
    </Box>
  );
}

export default FileUpload;