Separate Client Portal & Dashboard

frontend/client-portal/src/components/upload/UploadMultiFile.tsx

@@ -0,0 +1,69 @@
+import { useDropzone } from 'react-dropzone';
+// @mui
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+// type
+import { UploadMultiFileProps } from './type';
+//
+import BlockContent from './BlockContent';
+import RejectionFiles from './RejectionFiles';
+import MultiFilePreview from './MultiFilePreview';
+
+// ----------------------------------------------------------------------
+
+const DropZoneStyle = styled('div')(({ theme }) => ({
+  outline: 'none',
+  padding: theme.spacing(5, 1),
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.background.neutral,
+  border: `1px dashed ${theme.palette.grey[500_32]}`,
+  '&:hover': { opacity: 0.72, cursor: 'pointer' },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function UploadMultiFile({
+  error,
+  showPreview = false,
+  files,
+  onRemove,
+  onRemoveAll,
+  helperText,
+  sx,
+  ...other
+}: UploadMultiFileProps) {
+  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+    ...other,
+  });
+
+  return (
+    <Box sx={{ width: '100%', ...sx }}>
+      <DropZoneStyle
+        {...getRootProps()}
+        sx={{
+          ...(isDragActive && { opacity: 0.72 }),
+          ...((isDragReject || error) && {
+            color: 'error.main',
+            borderColor: 'error.light',
+            bgcolor: 'error.lighter',
+          }),
+        }}
+      >
+        <input {...getInputProps()} />
+
+        <BlockContent />
+      </DropZoneStyle>
+
+      {fileRejections.length > 0 && <RejectionFiles fileRejections={fileRejections} />}
+
+      <MultiFilePreview
+        files={files}
+        showPreview={showPreview}
+        onRemove={onRemove}
+        onRemoveAll={onRemoveAll}
+      />
+
+      {helperText && helperText}
+    </Box>
+  );
+}