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 Canvas from './components/Canvas'
import WebFont from 'webfontloader';

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

@ -203,69 +203,74 @@ const UploadImage = () => {
</div>
{/* upload image */}
<div className="max-w-md mx-auto p-4">
<Card>
<CardContent className="p-6 space-y-4">
<div
{...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' : ''}`}
ref={fileInputRef}
>
<input {...getInputProps()} />
<div className="flex flex-col items-center justify-center space-y-4">
<ImageIcon
className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
/>
<p className="text-sm text-gray-600">
{isDragActive
? 'Drop file here'
: 'Drag \'n\' drop an image, or click to select a file'
}
</p>
<p className="text-xs text-gray-500">
(Max 5MB, image files only)
</p>
</div>
</div>
{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>
{
!preview &&
<div className="max-w-md mx-auto p-4">
<Card>
<CardContent className="p-6 space-y-4">
<div
{...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' : ''}`}
ref={fileInputRef}
>
<input {...getInputProps()} />
<div className="flex flex-col items-center justify-center space-y-4">
<ImageIcon
className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
/>
<p className="text-sm text-gray-600">
{isDragActive
? 'Drop file here'
: 'Drag \'n\' drop an image, or click to select a file'
}
</p>
<p className="text-xs text-gray-500">
(Max 5MB, image files only)
</p>
</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>
</Card>
</div>
)}
</div>
</TabsContent>