From e44919ceced0c96b7adbc47d179d4440fc44617e Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 11:03:48 +0100
Subject: [PATCH] [dyad] Make upload area a dedicated dropzone - wrote 1
 file(s)

---
 src/components/image-converter.tsx | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 05fd900..e6bf365 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -244,25 +244,19 @@ export function ImageConverter() {
       <div className="lg:col-span-2 flex flex-col gap-8">
         <div
           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"
           )}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
+          onClick={() => fileInputRef.current?.click()}
         >
-          {isImageSelected && previewUrls[selectedImageIndex] ? (
-            <img src={previewUrls[selectedImageIndex]} alt="Selected image preview" className="max-w-full max-h-full object-contain rounded-md" />
-          ) : (
-            <div
-              className="w-full h-full flex flex-col items-center justify-center text-center cursor-pointer text-muted-foreground hover:text-primary transition-colors"
-              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>
-          )}
+          <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
+            <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 />
         </div>