diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
index e2bfbef2..0f37675b 100644
--- 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
index 05aeee36..798174f0 100644
--- 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}
/>
@@ -364,7 +338,8 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
control={control}
maxFiles={1}
shape="rectangle"
- maxSizeMB={20}
+ maxSizeMB={15}
+ warnSizeMB={banner_warnSizeMB}
/>
@@ -375,7 +350,8 @@ export default function ClubForm({ defaultValues = {}, action = "log" }) {
control={control}
maxFiles={1}
shape="square"
- maxSizeMB={15}
+ maxSizeMB={10}
+ warnSizeMB={bannerSquare_warnSizeMB}
/>
diff --git a/src/components/events/EventForm.jsx b/src/components/events/EventForm.jsx
index 9143e9fd..1131e3d5 100644
--- 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}
/>
diff --git a/src/components/profile/UserForm.jsx b/src/components/profile/UserForm.jsx
index b7c81d4c..6983a221 100644
--- 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}
/>
diff --git a/src/utils/files.jsx b/src/utils/files.jsx
index da504ee3..777fbe05 100644
--- 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(