From 13a90cb956b57038d6e7e89c6dda7a2a3415c3b2 Mon Sep 17 00:00:00 2001
From: Saimon8420 <latifulkabir567@gmail.com>
Date: Wed, 1 Jan 2025 11:44:25 +0600
Subject: [PATCH] svg preview fixed, along with that now from preview if the
 image remove, it will also removed from the canvas as well

---
 src/components/EachComponent/UploadImage.jsx | 28 +++++++++++++++-----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/EachComponent/UploadImage.jsx b/src/components/EachComponent/UploadImage.jsx
index 8956a48..34b4380 100644
--- a/src/components/EachComponent/UploadImage.jsx
+++ b/src/components/EachComponent/UploadImage.jsx
@@ -23,7 +23,7 @@ const UploadImage = () => {
     const [format, setFormat] = useState('JPEG');
     const fileInputRef = useRef(null);
 
-    const { setActiveObject } = useContext(ActiveObjectContext);
+    const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
 
     const [file, setFile] = useState(null);
     const [preview, setPreview] = useState(null);
@@ -81,6 +81,11 @@ const UploadImage = () => {
         if (fileInputRef.current) {
             fileInputRef.current.value = ""
         }
+        if (activeObject?.type === "image") {
+            canvas.remove(activeObject);
+            setActiveObject(null);
+            canvas.renderAll();
+        }
     }
 
     const handleResize = (file, callback) => {
@@ -226,11 +231,22 @@ const UploadImage = () => {
                                         {preview && (
                                             <div className="relative">
                                                 <div className="w-fit aspect-square relative">
-                                                    <img
-                                                        src={preview}
-                                                        alt="Uploaded image"
-                                                        className="object-cover rounded-lg"
-                                                    />
+                                                    {
+                                                        file?.type === "image/svg+xml" ? <object
+                                                            data={preview}
+                                                            type="image/svg+xml"
+                                                            className="object-cover rounded-lg"
+                                                            style={{ width: '100%', height: '100%' }}
+                                                        >
+                                                            Your browser does not support SVG, no preview available for SVG.
+                                                        </object> :
+                                                            <img
+                                                                src={preview}
+                                                                alt="Uploaded image"
+                                                                className="object-cover rounded-lg"
+                                                            />
+                                                    }
+
                                                     <Separator className="my-4" />
                                                     <div className="flex flex-col items-center gap-2">
                                                         <span className="text-sm text-gray-600">{file?.name}</span>