Image Uploading warning on bigger images. Updated max size of images …

…in different forms
Clubs-Council-IIITH · Dec 10, 2024 · d9da6a0 · d9da6a0
1 parent d04c7c6
commit d9da6a0
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 73 deletions.
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
@@ -1,16 +1,16 @@
 "use client";
 
 import Image from "next/image";
-
 import { useMemo } from "react";
 
 import { Chip, Box, Typography, FormHelperText } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 
 import { Controller } from "react-hook-form";
-
 import { useDropzone, ErrorCode } from "react-dropzone";
+
 import { getFile } from "utils/files";
+import { useToast } from "components/Toast";
 
 export default function FileUpload({
   control,
@@ -19,6 +19,7 @@ export default function FileUpload({
   type = "image",
   maxFiles = 0,
   maxSizeMB = 20, // 20MB
+  warnSizeMB = null,
   shape = "",
 }) {
   return (
@@ -36,6 +37,7 @@ export default function FileUpload({
             type={type}
             maxFiles={maxFiles}
             maxSizeMB={maxSizeMB}
+            warnSizeMB={warnSizeMB}
             shape={shape}
           />
         )}
@@ -55,8 +57,17 @@ 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 { triggerToast } = useToast();
 
   // accept only valid extensions
   const accept = useMemo(() => {
@@ -73,6 +84,22 @@ function DropZone({ files, onDrop, type, maxFiles, maxSizeMB, shape }) {
     }
   }, [type]);
 
+  const customValidator = (file) => {
+    // Run only for image type
+    if (type !== "image") return;
+
+    if (warnSizeMB && file.size > warnSizeMB * 1024 * 1024) {
+      triggerToast({
+        title: "File Size Warning!",
+        messages: [
+          "Your uploaded file will be compressed after upload.",
+          `You may upload a smaller file upto ${warnSizeMB}MB for no compression.`,
+        ],
+        severity: "warning",
+      });
+    }
+  };
+
   const {
     getRootProps,
     getInputProps,
@@ -85,6 +112,7 @@ function DropZone({ files, onDrop, type, maxFiles, maxSizeMB, shape }) {
     maxFiles,
     maxSize: maxSizeMB * 1024 * 1024,
     multiple: maxFiles > 1,
+    validator: customValidator,
   });
 
   return (

diff --git a/src/components/clubs/ClubForm.jsx b/src/components/clubs/ClubForm.jsx
@@ -33,6 +33,10 @@ import { socialsData } from "utils/socialsData";
 import { createClubAction } from "actions/clubs/create/server_action";
 import { editClubAction } from "actions/clubs/edit/server_action";
 
+const logo_warnSizeMB = 0.5;
+const banner_warnSizeMB = 1.5;
+const bannerSquare_warnSizeMB = 1;
+
 export default function ClubForm({ defaultValues = {}, action = "log" }) {
   const router = useRouter();
   const { user } = useAuth();
@@ -139,20 +143,11 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
       if (typeof formData.logo === "string") {
         data.logo = formData.logo;
       } else if (Array.isArray(formData.logo) && formData.logo.length > 0) {
-        const { filename, underlimit } = await uploadImageFile(
+        data.logo = await uploadImageFile(
           formData.logo[0],
-          logo_filename
+          logo_filename,
+          logo_warnSizeMB
         );
-        if (!underlimit) {
-          triggerToast({
-            title: "Warning",
-            messages: [
-              "Logo FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression.",
-            ],
-            severity: "warning",
-          });
-        }
-        data.logo = filename;
       } else {
         data.logo = null;
       }
@@ -170,22 +165,11 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
       if (typeof formData.banner === "string") {
         data.banner = formData.banner;
       } else if (Array.isArray(formData.banner) && formData.banner.length > 0) {
-        const { filename, underlimit } = await uploadImageFile(
+        data.banner = await uploadImageFile(
           formData.banner[0],
-          banner_filename
+          banner_filename,
+          banner_warnSizeMB
         );
-        if (!underlimit) {
-          triggerToast({
-            title: "Warning",
-            messages: [
-              "Banner FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression.",
-            ],
-            severity: "warning",
-          });
-        } else {
-          data.banner = null;
-        }
-        data.banner = filename;
       }
     } catch (error) {
       triggerToast({
@@ -204,22 +188,11 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
         Array.isArray(formData.bannerSquare) &&
         formData.bannerSquare.length > 0
       ) {
-        const { filename, underlimit } = await uploadImageFile(
+        data.bannerSquare = await uploadImageFile(
           formData.bannerSquare[0],
-          bannerSquare_filename
+          bannerSquare_filename,
+          bannerSquare_warnSizeMB
         );
-        if (!underlimit) {
-          triggerToast({
-            title: "Warning",
-            messages: [
-              "Square Banner FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression.",
-            ],
-            severity: "warning",
-          });
-        } else {
-          data.bannerSquare = null;
-        }
-        data.bannerSquare = filename;
       }
     } catch (error) {
       triggerToast({
@@ -353,7 +326,8 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
                   control={control}
                   maxFiles={1}
                   shape="circle"
-                  maxSizeMB={8}
+                  maxSizeMB={5}
+                  warnSizeMB={logo_warnSizeMB}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -364,7 +338,8 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
                   control={control}
                   maxFiles={1}
                   shape="rectangle"
-                  maxSizeMB={20}
+                  maxSizeMB={15}
+                  warnSizeMB={banner_warnSizeMB}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -375,7 +350,8 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
                   control={control}
                   maxFiles={1}
                   shape="square"
-                  maxSizeMB={15}
+                  maxSizeMB={10}
+                  warnSizeMB={bannerSquare_warnSizeMB}
                 />
               </Grid>
             </Grid>

diff --git a/src/components/events/EventForm.jsx b/src/components/events/EventForm.jsx
@@ -528,7 +528,9 @@ export default function EventForm({
                   label="Poster"
                   control={control}
                   maxFiles={1}
+                  maxSizeMB={10}
                   shape="square"
+                  warnSizeMB={1}
                 />
               </Grid>
             </Grid>

diff --git a/src/components/profile/UserForm.jsx b/src/components/profile/UserForm.jsx
@@ -22,6 +22,8 @@ import { uploadImageFile } from "utils/files";
 
 import { updateUserDataAction } from "actions/users/save/server_action";
 
+const profile_warnSizeMB = 0.5;
+
 export default function UserForm({ defaultValues = {}, action = "log" }) {
   const router = useRouter();
 
@@ -39,11 +41,11 @@ export default function UserForm({ defaultValues = {}, action = "log" }) {
 
       if (res.ok) {
         // show success toast & redirect to manage page
-        triggerToast({
-          title: "Success!",
-          messages: ["Profile saved."],
-          severity: "success",
-        });
+        // triggerToast({
+        //   title: "Success!",
+        //   messages: ["Profile saved."],
+        //   severity: "success",
+        // });
         router.push(`/profile/${defaultValues.uid}`);
         router.refresh();
       } else {
@@ -69,26 +71,24 @@ export default function UserForm({ defaultValues = {}, action = "log" }) {
     if (formData.phone == "") data.phone = null;
 
     // upload image
-    try{
+    try {
       if (typeof formData.img === "string") {
         data.img = formData.img;
       } else if (Array.isArray(formData.img) && formData.img.length > 0) {
-        const { filename, underlimit } = await uploadImageFile(formData.img[0], filename);
-        if (!underlimit) {
-          triggerToast({
-            title: "Warning",
-            messages: ["FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression."],
-            severity: "warning",
-          });
-        }
-        data.img = filename;
+        data.img = await uploadImageFile(
+          formData.img[0],
+          `profile_${defaultValues.uid}`,
+          profile_warnSizeMB
+        );
       } else {
         data.img = null;
       }
     } catch (error) {
       triggerToast({
         title: "Error",
-        messages: error.message ? [error.message] : error?.messages || ["Failed to upload image"],
+        messages: error.message
+          ? [error.message]
+          : error?.messages || ["Failed to upload image"],
         severity: "error",
       });
     }
@@ -220,7 +220,9 @@ export default function UserForm({ defaultValues = {}, action = "log" }) {
                   label="Profile Image"
                   control={control}
                   maxFiles={1}
+                  maxSizeMB={5}
                   shape="circle"
+                  warnSizeMB={profile_warnSizeMB}
                 />
               </Grid>
             </Grid>

diff --git a/src/utils/files.jsx b/src/utils/files.jsx
@@ -49,18 +49,15 @@ export async function uploadImageFile(file, filename = null, maxSizeMB = 0.3) {
   // construct filename
   const ext = file.name.split(".").pop();
   filename = filename ? `${filename}.${ext}` : file.name;
-  let underlimit = true;
 
-  // check file size limits
-  const sizeLimit = maxSizeMB * (1024 * 1024);
-  if (file.size > sizeLimit) {
-    underlimit = false;
-  }
-
-  return await {
-    underlimit: underlimit,
-    filename: await uploadFileCommon(file, "image", false, filename, maxSizeMB),
-  }
+  const finalFilename = await uploadFileCommon(
+    file,
+    "image",
+    false,
+    filename,
+    maxSizeMB
+  );
+  return finalFilename;
 }
 
 export async function uploadPDFFile(