129 lines
3.6 KiB
TypeScript
129 lines
3.6 KiB
TypeScript
import React, { Dispatch, FunctionComponent, useCallback, useState } from 'react';
|
|
|
|
import { useDropzone } from 'react-dropzone';
|
|
import { Box, Stack, Typography } from '@mui/material';
|
|
import BlockContent from './upload/BlockContent';
|
|
import { styled } from '@mui/material/styles';
|
|
import { UploadIllustration } from '../assets';
|
|
import Iconify from './Iconify';
|
|
|
|
const RootStyle = styled('div')(({ theme }) => ({
|
|
width: 144,
|
|
height: 144,
|
|
margin: 'auto',
|
|
borderRadius: '50%',
|
|
padding: theme.spacing(1),
|
|
border: `2px dashed ${theme.palette.grey[500_32]}`,
|
|
}));
|
|
const DropZoneStyle = styled('div')({
|
|
zIndex: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
outline: 'none',
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
borderRadius: '50%',
|
|
position: 'relative',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
'& > *': { width: '100%', height: '100%' },
|
|
'&:hover': {
|
|
cursor: 'pointer',
|
|
'& .placeholder': {
|
|
zIndex: 9,
|
|
},
|
|
},
|
|
});
|
|
|
|
const PlaceholderStyle = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
position: 'absolute',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
color: theme.palette.text.secondary,
|
|
// backgroundColor: theme.palette.background.neutral,
|
|
transition: theme.transitions.create('opacity', {
|
|
easing: theme.transitions.easing.easeInOut,
|
|
duration: theme.transitions.duration.shorter,
|
|
}),
|
|
'&:hover': { opacity: 0.72 },
|
|
}));
|
|
|
|
const UploadImage: FunctionComponent<{
|
|
setFile: Dispatch<any>;
|
|
currentImage: string;
|
|
}> = ({ setFile, currentImage, setSave, error, file, helperText, sx, ...other }) => {
|
|
const onDrop = useCallback(
|
|
(acceptedFiles) => {
|
|
// Do something with the files
|
|
console.log(acceptedFiles);
|
|
setFile(acceptedFiles[0]);
|
|
setImage(acceptedFiles[0]);
|
|
},
|
|
[setFile, setSave]
|
|
);
|
|
|
|
const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
|
|
onDrop,
|
|
multiple: false,
|
|
});
|
|
|
|
const [image, setImage] = useState<File | null>(null);
|
|
|
|
return (
|
|
<RootStyle
|
|
sx={{
|
|
...((isDragReject || error) && {
|
|
borderColor: 'error.light',
|
|
}),
|
|
...sx,
|
|
}}
|
|
>
|
|
<DropZoneStyle
|
|
{...getRootProps()}
|
|
sx={{
|
|
...(isDragActive && { opacity: 2.72 }),
|
|
}}
|
|
>
|
|
<input {...getInputProps()} />
|
|
{/* <Stack
|
|
spacing={2}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
direction={{ xs: 'column', md: 'row' }}
|
|
sx={{ width: 1, textAlign: { xs: 'center', md: 'left' } }}
|
|
> */}
|
|
{image ? (
|
|
<img src={URL.createObjectURL(image)} alt="preview" width={220} />
|
|
) : currentImage ? (
|
|
<img src={currentImage} alt="preview" width={220} />
|
|
) : (
|
|
<PlaceholderStyle
|
|
className="placeholder"
|
|
sx={{
|
|
...((isDragReject || error) && {
|
|
bgcolor: 'error.lighter',
|
|
}),
|
|
}}
|
|
>
|
|
<Iconify icon={'ic:round-add-a-photo'} sx={{ width: 24, height: 24, mb: 1 }} />
|
|
<Typography variant="caption">{image ? 'Update photo' : 'Upload photo'}</Typography>
|
|
</PlaceholderStyle>
|
|
)}
|
|
|
|
<PlaceholderStyle className="placeholder">
|
|
<Iconify icon={'ic:round-add-a-photo'} sx={{ width: 24, height: 24, mb: 1 }} />
|
|
<Typography variant="caption">{image ? 'Update photo' : 'Upload photo'}</Typography>
|
|
</PlaceholderStyle>
|
|
{/* </Stack> */}
|
|
{/* <BlockContent file={image} /> */}
|
|
|
|
{isDragReject && <p>Unsupported file type...</p>}
|
|
</DropZoneStyle>
|
|
</RootStyle>
|
|
);
|
|
};
|
|
|
|
export default UploadImage;
|