planpostai/canvas-backend
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

svg preview fixed, along with that now from preview if the image remove, it will also removed from the canvas as well

Browse source
This commit is contained in:
Saimon8420 2025-01-01 11:44:25 +06:00
parent 935c752171
commit 13a90cb956
1 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/EachComponent/UploadImage.jsx
View file

@ -23,7 +23,7 @@ const UploadImage = () => {
const [format, setFormat] = useState('JPEG'); const [format, setFormat] = useState('JPEG');
const fileInputRef = useRef(null); const fileInputRef = useRef(null);
const { setActiveObject } = useContext(ActiveObjectContext); const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
const [file, setFile] = useState(null); const [file, setFile] = useState(null);
const [preview, setPreview] = useState(null); const [preview, setPreview] = useState(null);
@ -81,6 +81,11 @@ const UploadImage = () => {
if (fileInputRef.current) { if (fileInputRef.current) {
fileInputRef.current.value = "" fileInputRef.current.value = ""
} }
if (activeObject?.type === "image") {
canvas.remove(activeObject);
setActiveObject(null);
canvas.renderAll();
}
} }
const handleResize = (file, callback) => { const handleResize = (file, callback) => {
@ -226,11 +231,22 @@ const UploadImage = () => {
{preview && ( {preview && (
<div className="relative"> <div className="relative">
<div className="w-fit aspect-square relative"> <div className="w-fit aspect-square relative">
{
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 <img
src={preview} src={preview}
alt="Uploaded image" alt="Uploaded image"
className="object-cover rounded-lg" className="object-cover rounded-lg"
/> />
}
<Separator className="my-4" /> <Separator className="my-4" />
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<span className="text-sm text-gray-600">{file?.name}</span> <span className="text-sm text-gray-600">{file?.name}</span>