94 lines
2.7 KiB
TypeScript
94 lines
2.7 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';
|
|
|
|
const DropZoneStyle = styled('div')(({ theme }) => ({
|
|
outline: 'none',
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
padding: theme.spacing(5, 1),
|
|
borderRadius: theme.shape.borderRadius,
|
|
transition: theme.transitions.create('padding'),
|
|
// backgroundColor: theme.palette.background.neutral,
|
|
backgroundColor: '#ffffff',
|
|
|
|
border: `2px dashed ${theme.palette.grey[500_32]}`,
|
|
'&:hover': { cursor: 'pointer', backgroundColor: '#f7f7f7' },
|
|
}));
|
|
|
|
const MyDropzone: FunctionComponent<{
|
|
setFile: Dispatch<any>;
|
|
currentImage: string;
|
|
}> = ({
|
|
setFile,
|
|
currentImage,
|
|
|
|
// onChanges,
|
|
}) => {
|
|
const onDrop = useCallback((acceptedFiles) => {
|
|
// Do something with the files
|
|
console.log(acceptedFiles);
|
|
setFile(acceptedFiles[0]);
|
|
setImage(acceptedFiles[0]);
|
|
// onChanges(acceptedFiles[0]);
|
|
}, []);
|
|
|
|
const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
|
|
onDrop,
|
|
multiple: false,
|
|
});
|
|
const [image, setImage] = useState<File | null>(null);
|
|
return (
|
|
<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} />
|
|
) : (
|
|
<UploadIllustration sx={{ width: 220 }} />
|
|
)}
|
|
|
|
<Box sx={{ p: 3 }}>
|
|
<Typography gutterBottom variant="h5">
|
|
Pilih Foto
|
|
</Typography>
|
|
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
|
Letakkan foto disini atau klik jelajahi
|
|
<Typography
|
|
variant="body2"
|
|
component="span"
|
|
sx={{ color: 'primary.main', textDecoration: 'underline' }}
|
|
>
|
|
jelajahi
|
|
</Typography>
|
|
foto di perangkat Anda
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
{/* <BlockContent file={image} /> */}
|
|
|
|
{isDragReject && <p>Unsupported file type...</p>}
|
|
</DropZoneStyle>
|
|
);
|
|
};
|
|
|
|
export default MyDropzone;
|