From 46657c36c983ac3701147e9df3954db05f0f1c88 Mon Sep 17 00:00:00 2001
From: shubhamv-ss <shubham.vaidya@smartsensesolutions.com>
Date: Fri, 18 Oct 2024 15:21:41 +0530
Subject: [PATCH] fix: lead image preview issue in apps overview

---
 src/components/pages/AppOverview/ChangeImage.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/AppOverview/ChangeImage.tsx b/src/components/pages/AppOverview/ChangeImage.tsx
index 11f588f3e..e61dde730 100644
--- a/src/components/pages/AppOverview/ChangeImage.tsx
+++ b/src/components/pages/AppOverview/ChangeImage.tsx
@@ -47,6 +47,7 @@ export default function ChangeImage() {
   const { state } = useLocation()
   const items = state
   const [cardImage, setCardImage] = useState('')
+  const [previewLocalCardImage, setPreviewLocalCardImage] = useState('')
   const [enableImageUpload, setEnableImageUpload] = useState(false)
   const [updateImageData] = useUpdateImageDataMutation()
   const [fetchDocumentById] = useFetchDocumentByIdMutation()
@@ -134,6 +135,15 @@ export default function ChangeImage() {
     }
   }
 
+  const cardImageData: string | null = getValues().uploadLeadImage
+
+  useEffect(() => {
+    if (cardImageData) {
+      const blobFile = new Blob([cardImageData], { type: 'image/png' })
+      setPreviewLocalCardImage(URL.createObjectURL(blobFile))
+    }
+  }, [cardImageData])
+
   return (
     <main className="change-image-main">
       <PageHeader title={app?.[0]?.title} headerHeight={200} topPage={true} />
@@ -155,7 +165,7 @@ export default function ChangeImage() {
               <Box sx={{ width: '40%' }}>
                 <Card
                   image={{
-                    src: cardImage,
+                    src: previewLocalCardImage || cardImage,
                   }}
                   title={app[0]?.title || ''}
                   subtitle={app[0]?.provider}
@@ -178,6 +188,9 @@ export default function ChangeImage() {
                     name="uploadLeadImage"
                     isRequired={false}
                     size="small"
+                    handleDelete={() => {
+                      setPreviewLocalCardImage('')
+                    }}
                   />
                 </Box>
               ) : (