Pass maxsize to the PDF upload same as the dropzone limit

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

Hide file tree

Showing 3 changed files with 71 additions and 30 deletions.
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
@@ -18,7 +18,7 @@ export default function FileUpload({
   name,
   type = "image",
   maxFiles = 0,
-  maxSize = 20 * 1024 * 1024, // 20MB
+  maxSizeMB = 20, // 20MB
   shape = "",
 }) {
   return (
@@ -35,7 +35,7 @@ export default function FileUpload({
             onDrop={onChange}
             type={type}
             maxFiles={maxFiles}
-            maxSize={maxSize}
+            maxSizeMB={maxSizeMB}
             shape={shape}
           />
         )}
@@ -55,7 +55,7 @@ function getIsTypeofFileRejected(fileRejections, type) {
   );
 }
 
-function DropZone({ files, onDrop, type, maxFiles, maxSize, shape }) {
+function DropZone({ files, onDrop, type, maxFiles, maxSizeMB, shape }) {
   const theme = useTheme();
 
   // accept only valid extensions
@@ -83,7 +83,7 @@ function DropZone({ files, onDrop, type, maxFiles, maxSize, shape }) {
     onDropAccepted: onDrop,
     accept,
     maxFiles,
-    maxSize,
+    maxSize: maxSizeMB * 1024 * 1024,
     multiple: maxFiles > 1,
   });
 
@@ -176,7 +176,7 @@ function DropZone({ files, onDrop, type, maxFiles, maxSize, shape }) {
         error={getIsTypeofFileRejected(fileRejections, ErrorCode.FileTooLarge)}
         sx={{ mt: 0 }}
       >
-        Allowed file size: {maxSize / 1024 / 1024}MB
+        Allowed file size: {maxSizeMB}MB
       </FormHelperText>
       <FormHelperText
         error={getIsTypeofFileRejected(

diff --git a/src/components/clubs/ClubForm.jsx b/src/components/clubs/ClubForm.jsx
@@ -139,11 +139,16 @@ 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(formData.logo[0], logo_filename);
+        const { filename, underlimit } = await uploadImageFile(
+          formData.logo[0],
+          logo_filename
+        );
         if (!underlimit) {
           triggerToast({
             title: "Warning",
-            messages: ["Logo FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression."],
+            messages: [
+              "Logo FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression.",
+            ],
             severity: "warning",
           });
         }
@@ -154,7 +159,9 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
     } catch (error) {
       triggerToast({
         title: "Error",
-        messages: error.message ? [error.message] : error?.messages || ["Failed to upload logo"],
+        messages: error.message
+          ? [error.message]
+          : error?.messages || ["Failed to upload logo"],
         severity: "error",
       });
     }
@@ -163,11 +170,16 @@ 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(formData.banner[0], banner_filename);
+        const { filename, underlimit } = await uploadImageFile(
+          formData.banner[0],
+          banner_filename
+        );
         if (!underlimit) {
           triggerToast({
             title: "Warning",
-            messages: ["Banner FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression."],
+            messages: [
+              "Banner FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression.",
+            ],
             severity: "warning",
           });
         } else {
@@ -178,20 +190,30 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
     } catch (error) {
       triggerToast({
         title: "Error",
-        messages: error.message ? [error.message] : error?.messages || ["Failed to upload banner"],
+        messages: error.message
+          ? [error.message]
+          : error?.messages || ["Failed to upload banner"],
         severity: "error",
       });
     }
 
     try {
       if (typeof formData.bannerSquare === "string") {
         data.bannerSquare = formData.bannerSquare;
-      } else if (Array.isArray(formData.bannerSquare) && formData.bannerSquare.length > 0) {
-        const { filename, underlimit } = await uploadImageFile(formData.bannerSquare[0], bannerSquare_filename);
+      } else if (
+        Array.isArray(formData.bannerSquare) &&
+        formData.bannerSquare.length > 0
+      ) {
+        const { filename, underlimit } = await uploadImageFile(
+          formData.bannerSquare[0],
+          bannerSquare_filename
+        );
         if (!underlimit) {
           triggerToast({
             title: "Warning",
-            messages: ["Square Banner FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression."],
+            messages: [
+              "Square Banner FileSize exceeds the maximum limit of 0.3 MB, might affect quality during compression.",
+            ],
             severity: "warning",
           });
         } else {
@@ -202,7 +224,9 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
     } catch (error) {
       triggerToast({
         title: "Error",
-        messages: error.message ? [error.message] : error?.messages || ["Failed to upload square banner"],
+        messages: error.message
+          ? [error.message]
+          : error?.messages || ["Failed to upload square banner"],
         severity: "error",
       });
     }
@@ -329,7 +353,7 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
                   control={control}
                   maxFiles={1}
                   shape="circle"
-                  maxSize={8 * 1024 * 1024}
+                  maxSizeMB={8}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -340,7 +364,7 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
                   control={control}
                   maxFiles={1}
                   shape="rectangle"
-                  maxSize={20 * 1024 * 1024}
+                  maxSizeMB={20}
                 />
               </Grid>
               <Grid item xs={12}>
@@ -351,7 +375,7 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
                   control={control}
                   maxFiles={1}
                   shape="square"
-                  maxSize={15 * 1024 * 1024}
+                  maxSizeMB={15}
                 />
               </Grid>
             </Grid>

diff --git a/src/components/docs/DocForm.jsx b/src/components/docs/DocForm.jsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import React, { useState } from "react";
 import { useForm, Controller } from "react-hook-form";
@@ -10,7 +10,6 @@ import {
   Button,
   Typography,
   Grid,
-  IconButton,
   Dialog,
   DialogTitle,
   DialogContent,
@@ -28,6 +27,8 @@ import { createStorageFile } from "actions/storagefiles/create/server_action";
 import { updateStorageFile } from "actions/storagefiles/update/server_action";
 import { deleteStorageFile } from "actions/storagefiles/delete/server_action";
 
+const maxFileSizeMB = 20;
+
 export default function DocForm({ editFile = null, newFile = true }) {
   const [loading, setLoading] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -61,7 +62,9 @@ export default function DocForm({ editFile = null, newFile = true }) {
     } catch (error) {
       triggerToast({
         title: "Error",
-        messages: error.message ? [error.message] : error?.messages || ["Failed to delete document"],
+        messages: error.message
+          ? [error.message]
+          : error?.messages || ["Failed to delete document"],
         severity: "error",
       });
     } finally {
@@ -73,13 +76,19 @@ export default function DocForm({ editFile = null, newFile = true }) {
     setLoading(true);
 
     try {
-
       // check all fields
       if (!data.title || !data.file) {
-        throw new Error("Please fill all the required Fields before submitting.");
+        throw new Error(
+          "Please fill all the required Fields before submitting."
+        );
       }
 
-      const filename = await uploadPDFFile(data.file[0], true, data.title);
+      const filename = await uploadPDFFile(
+        data.file[0],
+        true,
+        data.title,
+        maxFileSizeMB
+      );
       if (!filename) {
         throw new Error("File upload failed, check Title and File validity");
       }
@@ -111,7 +120,9 @@ export default function DocForm({ editFile = null, newFile = true }) {
     } catch (error) {
       triggerToast({
         title: "Error",
-        messages: error?.message ? [error.message] : error?.messages || ["Failed to save document"],
+        messages: error?.message
+          ? [error.message]
+          : error?.messages || ["Failed to save document"],
         severity: "error",
       });
     } finally {
@@ -125,7 +136,7 @@ export default function DocForm({ editFile = null, newFile = true }) {
         <Typography variant="h5" sx={{ p: 2 }}>
           Upload File
         </Typography>
-        { !newFile ? (
+        {!newFile ? (
           <Button
             variant="contained"
             align="right"
@@ -134,9 +145,9 @@ export default function DocForm({ editFile = null, newFile = true }) {
             onClick={openDeleteDialog}
             startIcon={<Icon variant="delete" />}
           >
-           Delete
+            Delete
           </Button>
-        ) : null }
+        ) : null}
       </Grid>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Grid container spacing={3}>
@@ -168,6 +179,7 @@ export default function DocForm({ editFile = null, newFile = true }) {
               type="document"
               control={control}
               maxFiles={1}
+              maxSizeMB={maxFileSizeMB}
             />
           </Grid>
           <Grid item xs={12}>
@@ -194,13 +206,18 @@ export default function DocForm({ editFile = null, newFile = true }) {
       <Dialog open={deleteDialogOpen} onClose={closeDeleteDialog}>
         <DialogTitle>Confirm Delete</DialogTitle>
         <DialogContent>
-          Are you sure you want to delete this file? This action cannot be undone.
+          Are you sure you want to delete this file? This action cannot be
+          undone.
         </DialogContent>
         <DialogActions>
           <Button onClick={closeDeleteDialog} color="primary">
             Cancel
           </Button>
-          <Button onClick={handleDeleteConfirm} color="error" variant="contained">
+          <Button
+            onClick={handleDeleteConfirm}
+            color="error"
+            variant="contained"
+          >
             Delete
           </Button>
         </DialogActions>