pascallinxweiler/Webify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Make upload area a dedicated dropzone - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 11:03:48 +01:00
parent afedf1ef98
commit e44919cece
1 changed files with 7 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/image-converter.tsx
View File

@@ -244,25 +244,19 @@ export function ImageConverter() {
<div className="lg:col-span-2 flex flex-col gap-8"> <div className="lg:col-span-2 flex flex-col gap-8">
<div <div
className={cn( className={cn(
"w-full aspect-video rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors p-1", "w-full aspect-video rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors p-1 cursor-pointer",
isDraggingOver ? "border-primary bg-accent" : "border-input" isDraggingOver ? "border-primary bg-accent" : "border-input"
)} )}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
onClick={() => fileInputRef.current?.click()}
> >
{isImageSelected && previewUrls[selectedImageIndex] ? ( <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
<img src={previewUrls[selectedImageIndex]} alt="Selected image preview" className="max-w-full max-h-full object-contain rounded-md" /> <Upload className="w-10 h-10 mb-4" />
) : ( <p className="text-lg font-semibold">Click to upload or drag and drop</p>
<div <p className="text-sm">Select files from your computer</p>
className="w-full h-full flex flex-col items-center justify-center text-center cursor-pointer text-muted-foreground hover:text-primary transition-colors" </div>
onClick={() => fileInputRef.current?.click()}
>
<Upload className="w-10 h-10 mb-4" />
<p className="text-lg font-semibold">Click to upload or drag and drop</p>
<p className="text-sm">Select files from your computer</p>
</div>
)}
<Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple /> <Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
</div> </div>