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';

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

@ -203,69 +203,74 @@ const UploadImage = () => {
</div> </div>
{/* upload image */} {/* upload image */}
<div className="max-w-md mx-auto p-4"> {
<Card> !preview &&
<CardContent className="p-6 space-y-4"> <div className="max-w-md mx-auto p-4">
<div <Card>
{...getRootProps()} <CardContent className="p-6 space-y-4">
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${isDragActive ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary'} ${preview ? 'hidden' : ''}`} <div
ref={fileInputRef} {...getRootProps()}
> className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${isDragActive ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary'} ${preview ? 'hidden' : ''}`}
<input {...getInputProps()} /> ref={fileInputRef}
<div className="flex flex-col items-center justify-center space-y-4"> >
<ImageIcon <input {...getInputProps()} />
className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`} <div className="flex flex-col items-center justify-center space-y-4">
/> <ImageIcon
<p className="text-sm text-gray-600"> className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
{isDragActive />
? 'Drop file here' <p className="text-sm text-gray-600">
: 'Drag \'n\' drop an image, or click to select a file' {isDragActive
} ? 'Drop file here'
</p> : 'Drag \'n\' drop an image, or click to select a file'
<p className="text-xs text-gray-500"> }
(Max 5MB, image files only) </p>
</p> <p className="text-xs text-gray-500">
</div> (Max 5MB, image files only)
</div> </p>
{preview && (
<div className="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
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>
<Button
variant="destructive"
size="sm"
onClick={removeFile}
>
<Trash2 className="mr-2 h-4 w-4" />
Remove
</Button>
</div>
</div> </div>
</div> </div>
)} </CardContent>
</Card>
</div>
}
{/* preview image */}
{preview && (
<Card className="overflow-y-scroll rounded-none">
<CardContent className="mt-2 mb-2">
<div className="w-fit aspect-square relative h-[100%]">
{
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 overflow-hidden"
/>
}
<Separator className="my-4" />
<div className="grid grid-cols-1 gap-2 items-center pb-4">
<p className="text-sm text-gray-600 truncate">{file?.name}</p>
<Button
variant="destructive"
size="sm"
onClick={removeFile}
>
<Trash2 className="mr-2 h-4 w-4" />
Remove
</Button>
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> )}
</div> </div>
</TabsContent> </TabsContent>