upload foto, dan bugs import

2022-12-21 17:22:45 +07:00
parent 88ad144921
commit b1c908a6f6
12 changed files with 576 additions and 169 deletions
--- a/frontend/dashboard/src/components/MyDropzone.tsx
+++ b/frontend/dashboard/src/components/MyDropzone.tsx
@@ -0,0 +1,93 @@
+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 &nbsp;
+            <Typography
+              variant="body2"
+              component="span"
+              sx={{ color: 'primary.main', textDecoration: 'underline' }}
+            >
+              jelajahi
+            </Typography>
+            &nbsp;foto di perangkat Anda
+          </Typography>
+        </Box>
+      </Stack>
+      {/* <BlockContent file={image} /> */}
+
+      {isDragReject && <p>Unsupported file type...</p>}
+    </DropZoneStyle>
+  );
+};
+
+export default MyDropzone;