implement drag and drop uploader

app/routes.ts

@@ -1,3 +1,6 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index,route } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+    index("routes/home.tsx"),
+    route('visualizer/:id','./routes/visualizer.$id.tsx')
+] satisfies RouteConfig;

app/routes/home.tsx

@@ -2,6 +2,8 @@ import Navbar from "components/Navbar";
 import type { Route } from "./+types/home";
 import { ArrowRight, ArrowUpRight, Clock, Layers } from "lucide-react";
 import Button from "components/ui/Button";
+import Upload from "components/Upload";
+import {useNavigate} from "react-router";
 
 
 export function meta({}: Route.MetaArgs) {
@@ -12,6 +14,15 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
+  const navigate = useNavigate();
+
+    const handleUploadComplete = async (base64Image: string) => {
+        const newId = Date.now().toString();
+
+        navigate(`/visualizer/${newId}`);
+
+        return true;
+    }
   return (
   <div className="home">
     <Navbar/>
@@ -48,7 +59,10 @@ export default function Home() {
             <h3>Upload your floor plan</h3>
             <p>Support JPG,PNG,formats up to 10MB</p>
           </div>
-          <p>Upload image</p>
+          <Upload onComplete={handleUploadComplete} />
+          {/* <Upload onComplete={(base64Data)=>{
+            console.log("upload complete",base64Data)
+          }}/> */}
         </div>
 
       </div>
@@ -66,7 +80,9 @@ export default function Home() {
         <div className="projects-grid">
           <div className="project-card group">
             <div className="preview">
-              <img alt="Project"/>
+              <img 
+                src="https://roomify-mlhuk267-dfwu1i.puter.site/projects/1770803585402/rendered.png"
+                alt="Project"/>
               <div className="badge">
                 <span>Community</span>
               </div>

app/routes/visualizer.$id.tsx

@@ -0,0 +1,11 @@
+
+
+const VisualizerId = () => {
+  return (
+    <div>
+      VisualizerId
+    </div>
+  )
+}
+
+export default VisualizerId

components/Upload.tsx

@@ -0,0 +1,135 @@
+import React, {useCallback, useState} from 'react'
+import {useOutletContext} from "react-router";
+import {CheckCircle2, ImageIcon, UploadIcon} from "lucide-react";
+import {PROGRESS_INCREMENT, REDIRECT_DELAY_MS, PROGRESS_INTERVAL_MS} from "../lib/constants";
+
+interface UploadProps {
+    onComplete?: (base64Data: string) => void;
+}
+
+const Upload = ({ onComplete }: UploadProps) => {
+    const [file, setFile] = useState<File | null>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [progress, setProgress] = useState(0);
+
+    const { isSignedIn } = useOutletContext<AuthContext>();
+
+    const processFile = useCallback((file: File) => {
+        if (!isSignedIn) return;
+
+        setFile(file);
+        setProgress(0);
+
+        const reader = new FileReader();
+        reader.onerror = () =>{
+            setFile(null);
+            setProgress(0);
+        }
+        reader.onloadend = () => {
+            const base64Data = reader.result as string;
+
+            const interval = setInterval(() => {
+                setProgress((prev) => {
+                    const next = prev + PROGRESS_INCREMENT;
+                    if (next >= 100) {
+                        clearInterval(interval);
+                        setTimeout(() => {
+                            onComplete?.(base64Data);
+                        }, REDIRECT_DELAY_MS);
+                        return 100;
+                    }
+                    return next;
+                });
+            }, PROGRESS_INTERVAL_MS);
+        };
+        reader.readAsDataURL(file);
+    }, [isSignedIn, onComplete]);
+
+    const handleDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        if (!isSignedIn) return;
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = () => {
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        if (!isSignedIn) return;
+
+        const droppedFile = e.dataTransfer.files[0];
+        const allowedTypes = ['image/jpeg','image/png'];
+        if (droppedFile && allowedTypes.includes(droppedFile.type)) {
+            processFile(droppedFile);
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!isSignedIn) return;
+
+        const selectedFile = e.target.files?.[0];
+        if (selectedFile) {
+            processFile(selectedFile);
+        }
+    };
+
+    return (
+        <div className="upload">
+            {!file ? (
+                <div
+                    className={`dropzone ${isDragging ? 'is-dragging' : ''}`}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                >
+                    <input
+                        type="file"
+                        className="drop-input"
+                        accept=".jpg,.jpeg,.png"
+                        disabled={!isSignedIn}
+                        onChange={handleChange}
+                    />
+
+                    <div className="drop-content">
+                        <div className="drop-icon">
+                            <UploadIcon size={20} />
+                        </div>
+                        <p>
+                            {isSignedIn ? (
+                                "Click to upload or just drag and drop"
+                            ): ("Sign in or sign up with Puter to upload")}
+                        </p>
+                        <p className="help">Maximum file size 50 MB.</p>
+                    </div>
+                </div>
+            ) : (
+                <div className="upload-status">
+                    <div className="status-content">
+                        <div className="status-icon">
+                            {progress === 100 ? (
+                                <CheckCircle2 className="check" />
+                            ): (
+                                <ImageIcon className="image" />
+                            )}
+                        </div>
+
+                        <h3>{file.name}</h3>
+
+                        <div className='progress'>
+                            <div className="bar" style={{ width: `${progress}%` }} />
+
+                            <p className="status-text">
+                                {progress < 100 ? 'Analyzing Floor Plan...' : 'Redirecting...'}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+export default Upload

lib/constants.ts

@@ -0,0 +1,56 @@
+export const PUTER_WORKER_URL = import.meta.env.VITE_PUTER_WORKER_URL || "";
+
+// Storage Paths
+export const STORAGE_PATHS = {
+    ROOT: "roomify",
+    SOURCES: "roomify/sources",
+    RENDERS: "roomify/renders",
+} as const;
+
+// Timing Constants (in milliseconds)
+export const SHARE_STATUS_RESET_DELAY_MS = 1500;
+export const PROGRESS_INCREMENT = 15;
+export const REDIRECT_DELAY_MS = 600;
+export const PROGRESS_INTERVAL_MS = 100;
+export const PROGRESS_STEP = 5;
+
+// UI Constants
+export const GRID_OVERLAY_SIZE = "60px 60px";
+export const GRID_COLOR = "#3B82F6";
+
+// HTTP Status Codes
+export const UNAUTHORIZED_STATUSES = [401, 403];
+
+// Image Dimensions
+export const IMAGE_RENDER_DIMENSION = 1024;
+
+export const ROOMIFY_RENDER_PROMPT = `
+TASK: Convert the input 2D floor plan into a **photorealistic, top‑down 3D architectural render**.
+
+STRICT REQUIREMENTS (do not violate):
+1) **REMOVE ALL TEXT**: Do not render any letters, numbers, labels, dimensions, or annotations. Floors must be continuous where text used to be.
+2) **GEOMETRY MUST MATCH**: Walls, rooms, doors, and windows must follow the exact lines and positions in the plan. Do not shift or resize.
+3) **TOP‑DOWN ONLY**: Orthographic top‑down view. No perspective tilt.
+4) **CLEAN, REALISTIC OUTPUT**: Crisp edges, balanced lighting, and realistic materials. No sketch/hand‑drawn look.
+5) **NO EXTRA CONTENT**: Do not add rooms, furniture, or objects that are not clearly indicated by the plan.
+
+STRUCTURE & DETAILS:
+- **Walls**: Extrude precisely from the plan lines. Consistent wall height and thickness.
+- **Doors**: Convert door swing arcs into open doors, aligned to the plan.
+- **Windows**: Convert thin perimeter lines into realistic glass windows.
+
+FURNITURE & ROOM MAPPING (only where icons/fixtures are clearly shown):
+- Bed icon → realistic bed with duvet and pillows.
+- Sofa icon → modern sectional or sofa.
+- Dining table icon → table with chairs.
+- Kitchen icon → counters with sink and stove.
+- Bathroom icon → toilet, sink, and tub/shower.
+- Office/study icon → desk, chair, and minimal shelving.
+- Porch/patio/balcony icon → outdoor seating or simple furniture (keep minimal).
+- Utility/laundry icon → washer/dryer and minimal cabinetry.
+
+STYLE & LIGHTING:
+- Lighting: bright, neutral daylight. High clarity and balanced contrast.
+- Materials: realistic wood/tile floors, clean walls, subtle shadows.
+- Finish: professional architectural visualization; no text, no watermarks, no logos.
+`.trim();