diff --git a/src/components/Tenant/LogoUpload.jsx b/src/components/Tenant/LogoUpload.jsx index aa6fbc12..9da2f998 100644 --- a/src/components/Tenant/LogoUpload.jsx +++ b/src/components/Tenant/LogoUpload.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useFormContext } from "react-hook-form"; const toBase64 = (file) => @@ -10,11 +10,15 @@ const toBase64 = (file) => }); export const LogoUpload = ({ preview, setPreview, fileName, setFileName }) => { - const { - register, - setValue, - formState: { errors }, - } = useFormContext(); + const { register, setValue, watch, formState: { errors } } = useFormContext(); + const logoImage = watch("logoImage"); + + // Sync preview when the form value changes + useEffect(() => { + if (logoImage && !preview) { + setPreview(logoImage); // Use base64 as preview + } + }, [logoImage, preview, setPreview]); const handleUpload = async (e) => { const file = e.target.files?.[0]; diff --git a/src/components/Tenant/OrganizationInfo.jsx b/src/components/Tenant/OrganizationInfo.jsx index b12c55b2..1e166423 100644 --- a/src/components/Tenant/OrganizationInfo.jsx +++ b/src/components/Tenant/OrganizationInfo.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { useFormContext, Controller } from "react-hook-form"; import Label from "../common/Label"; import DatePicker from "../common/DatePicker"; @@ -57,6 +57,13 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => { } }; + useEffect(() => { + const logoImage = getValues("logoImage"); + if (logoImage) { + setLogoPreview(logoImage); + setLogoName("Uploaded Logo"); + } +}, [getValues]); return (