update status page/index to handle image upload logic

client/src/Pages/StatusPage/Create/index.jsx

@@ -3,7 +3,6 @@ import { Stack, Button, Typography } from "@mui/material";
 import Tabs from "./Components/Tabs";
 import GenericFallback from "../../../Components/GenericFallback";
 import SkeletonLayout from "./Components/Skeleton";
-import Breadcrumbs from "../../../Components/Breadcrumbs/index.jsx";
 //Utils
 import { useTheme } from "@emotion/react";
 import { useState, useEffect, useRef, useCallback } from "react";
@@ -59,19 +58,6 @@ const CreateStatusPage = () => {
 
 	const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
 		useStatusPageFetch(isCreate, url);
-	
-	// Breadcrumbs
-	const crumbs = [
-		{ name: t("statusBreadCrumbsStatusPages"), path: "/status" },
-	];
-	if (isCreate) {
-		crumbs.push({ name: t("statusBreadCrumbsCreate"), path: "/status/uptime/create" });
-	} else {
-		crumbs.push(
-			{ name: t("statusBreadCrumbsDetails"), path: `/status/uptime/${statusPage?.url}` },
-			{ name: t("configure"), path: `/status/uptime/configure/${statusPage?.url}` }
-		);
-	}
 
 	// Handlers
 	const handleFormChange = (e) => {
@@ -101,30 +87,31 @@ const CreateStatusPage = () => {
 		}));
 	};
 
-	const handleImageChange = useCallback((event) => {
-		const img = event.target?.files?.[0];
-		const newLogo = {
-			src: URL.createObjectURL(img),
-			name: img.name,
-			type: img.type,
-			size: img.size,
-		};
+	const handleImageChange = useCallback((fileObj) => {
+		if (!fileObj || !fileObj.file) return;
+	  
 		setForm((prev) => ({
-			...prev,
-			logo: newLogo,
+		  ...prev,
+		  logo: {
+			src: fileObj.src,
+			name: fileObj.name,
+			type: fileObj.file.type,
+			size: fileObj.file.size,
+		  },
 		}));
+	  
 		intervalRef.current = setInterval(() => {
-			const buffer = 12;
-			setProgress((prev) => {
-				if (prev.value + buffer >= 100) {
-					clearInterval(intervalRef.current);
-					return { value: 100, isLoading: false };
-				}
-				return { ...prev, value: prev.value + buffer };
-			});
+		  const buffer = 12;
+		  setProgress((prev) => {
+			if (prev.value + buffer >= 100) {
+			  clearInterval(intervalRef.current);
+			  return { value: 100, isLoading: false };
+			}
+			return { ...prev, value: prev.value + buffer };
+		  });
 		}, 120);
 	}, []);
-
+	  
 	const removeLogo = () => {
 		setForm((prev) => ({
 			...prev,
@@ -232,7 +219,6 @@ const CreateStatusPage = () => {
 	// Load fields
 	return (
 		<Stack gap={theme.spacing(10)}>
-			<Breadcrumbs list={crumbs} />
 			<Tabs
 				form={form}
 				errors={errors}