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

photo preview portion fixed

Browse source
This commit is contained in:
Saimon8420 2025-01-05 12:20:18 +06:00
parent 56ef0c44ff
commit 3f3ac499d3
2 changed files with 65 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.jsx
View file

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'; import { useEffect } from 'react';
import './App.css' import './App.css'
import Canvas from './components/Canvas' import Canvas from './components/Canvas'
import WebFont from 'webfontloader'; import WebFont from 'webfontloader';

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

@ -203,6 +203,8 @@ const UploadImage = () => {
</div> </div>
{/* upload image */} {/* upload image */}
{
!preview &&
<div className="max-w-md mx-auto p-4"> <div className="max-w-md mx-auto p-4">
<Card> <Card>
<CardContent className="p-6 space-y-4"> <CardContent className="p-6 space-y-4">
@ -227,10 +229,16 @@ const UploadImage = () => {
</p> </p>
</div> </div>
</div> </div>
</CardContent>
</Card>
</div>
}
{/* preview image */}
{preview && ( {preview && (
<div className="relative"> <Card className="overflow-y-scroll rounded-none">
<div className="w-fit aspect-square relative"> <CardContent className="mt-2 mb-2">
<div className="w-fit aspect-square relative h-[100%]">
{ {
file?.type === "image/svg+xml" ? <object file?.type === "image/svg+xml" ? <object
data={preview} data={preview}
@ -243,13 +251,13 @@ const UploadImage = () => {
<img <img
src={preview} src={preview}
alt="Uploaded image" alt="Uploaded image"
className="object-cover rounded-lg" className="object-cover rounded-lg overflow-hidden"
/> />
} }
<Separator className="my-4" /> <Separator className="my-4" />
<div className="flex flex-col items-center gap-2"> <div className="grid grid-cols-1 gap-2 items-center pb-4">
<span className="text-sm text-gray-600">{file?.name}</span> <p className="text-sm text-gray-600 truncate">{file?.name}</p>
<Button <Button
variant="destructive" variant="destructive"
size="sm" size="sm"
@ -260,12 +268,9 @@ const UploadImage = () => {
</Button> </Button>
</div> </div>
</div> </div>
</div>
)}
</CardContent> </CardContent>
</Card> </Card>
</div> )}
</div> </div>
</TabsContent> </TabsContent>