FINAL-PROJECT-FRONT/src/components/reusableComponents/DropZone/UploadAvatar/index.tsx

import { makeStyles, Typography,InputLabel,ListItem,ListItemText ,ListItemIcon } from '@material-ui/core'
import FolderIcon from '@mui/icons-material/Folder';
import { useDropzone } from 'react-dropzone';
import { useEffect } from 'react';

const useStyles = makeStyles({
  container: {
    width: '100%',
  },
  dropZone: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    width: '100%',
    padding: '10px',
    borderRadius: 10,
    cursor: 'pointer',
    marginBottom: 20,
    outline: '2px solid  #959696',
    '&:hover': {
      outline: 'dashed  #0040b8',
    },
  },
})

interface IUploadAvatar {
  setUpload: React.Dispatch<React.SetStateAction<any>>
}
const  UploadAvatar = ({ setUpload }: IUploadAvatar) => {
  
const {
    acceptedFiles,
    getRootProps,
    getInputProps
  } = useDropzone({
    accept: 'image/*',
  });

    useEffect(() => {
      setUpload(acceptedFiles[0])
  }, [setUpload,acceptedFiles])

  const classes = useStyles()
  const acceptedFileItems = acceptedFiles.map((file: any) => (
    <ListItem key={file.path}>
      <ListItemIcon>
        <FolderIcon/>
      </ListItemIcon>
      <ListItemText
        primary="Avatar uploaded"
        secondary={`${file.path} -${file.size} bytes`}/>
   </ListItem>
  ));

  return (
    <section className={classes.container} >
      <div {...getRootProps({ className: classes.dropZone })}>
        <InputLabel>Drag or drop avatar*</InputLabel>
        <input {...getInputProps()}/>
        <img
          alt='drop zone img'
          src='https://imagga.com/static/images/upload.svg'
          width={88}
          height={72}
        />
        <Typography variant="h6" color="initial">image/*</Typography>
      </div>
      <aside>
        <ul>{acceptedFileItems}</ul>
      </aside>
    </section>
  );
}

export default UploadAvatar