FileUpload: add warning to the dropzone

Clubs-Council-IIITH · Dec 10, 2024 · 333ce9e · 333ce9e
1 parent d04c7c6
commit 333ce9e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import { Chip, Box, Typography, FormHelperText } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
@@ -19,6 +19,7 @@ export default function FileUpload({
   type = "image",
   maxFiles = 0,
   maxSizeMB = 20, // 20MB
+  warnSizeMB = 0.3, // 20MB
   shape = "",
 }) {
   return (
@@ -36,6 +37,7 @@ export default function FileUpload({
             type={type}
             maxFiles={maxFiles}
             maxSizeMB={maxSizeMB}
+            warnSizeMB={warnSizeMB}
             shape={shape}
           />
         )}
@@ -55,8 +57,11 @@ function getIsTypeofFileRejected(fileRejections, type) {
   );
 }
 
-function DropZone({ files, onDrop, type, maxFiles, maxSizeMB, shape }) {
+function DropZone({ files, onDrop, type, maxFiles, maxSizeMB, warnSizeMB, shape }) {
   const theme = useTheme();
+  const [sizeWarning, setSizeWarning] = useState(null);
+  const maxSize = maxSizeMB * 1024 * 1024;
+  const warnSize = warnSizeMB * 1024 * 1024;
 
   // accept only valid extensions
   const accept = useMemo(() => {
@@ -73,17 +78,35 @@ function DropZone({ files, onDrop, type, maxFiles, maxSizeMB, shape }) {
     }
   }, [type]);
 
+  const handleDrop = (acceptedFiles) => {
+    console.log(acceptedFiles);
+    const oversizedFiles = acceptedFiles.filter(
+      (file) => file.size > warnSize && file.size <= maxSize
+    );
+
+    if (oversizedFiles.length > 0) {
+      setSizeWarning(
+        `Warning: File exceeds the recommended size of ${
+          warnSizeMB
+        } MB, compressed image may affect quality.`
+      );
+    } else {
+      setSizeWarning(null);
+    }
+    onDrop(acceptedFiles);
+  };
+
   const {
     getRootProps,
     getInputProps,
     isDragActive,
     isDragReject,
     fileRejections,
   } = useDropzone({
-    onDropAccepted: onDrop,
+    onDrop: handleDrop,
     accept,
     maxFiles,
-    maxSize: maxSizeMB * 1024 * 1024,
+    maxSize: maxSize,
     multiple: maxFiles > 1,
   });
 
@@ -167,6 +190,13 @@ function DropZone({ files, onDrop, type, maxFiles, maxSizeMB, shape }) {
           </Box>
         )}
       </Box>
+      {sizeWarning && (
+        <FormHelperText
+          sx={{ mt: 2, color: "warning.main", fontWeight: "bold" }}
+        >
+          {sizeWarning}
+        </FormHelperText>
+      )}
       <FormHelperText
         error={getIsTypeofFileRejected(fileRejections, ErrorCode.TooManyFiles)}
       >

diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx
@@ -37,6 +37,7 @@ export function ToastProvider({ children }) {
     setToast({ open: true, title, messages, severity });
   };
 
+  // TODO: feature: add support for multiple toasts simultaneously
   return (
     <ToastContext.Provider
       value={{