fix: allow dropping image into image tab (#2965)

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/left-panel/image-tab/hooks/use-image-drag-drop.tsx

@@ -3,7 +3,7 @@ import { EditorMode, type ImageContentData } from '@onlook/models';
 import { usePostHog } from 'posthog-js/react';
 import { useCallback, useState } from 'react';
 
-export const useImageDragDrop = () => {
+export const useImageDragDrop = (onUpload?: (files: FileList) => Promise<void>) => {
     const editorEngine = useEditorEngine();
     const posthog = usePostHog();
     const [isDragging, setIsDragging] = useState(false);
@@ -87,11 +87,23 @@ export const useImageDragDrop = () => {
         editorEngine.state.editorMode = EditorMode.DESIGN;
     }, []);
 
+    const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        setIsDragging(false);
+        e.currentTarget.removeAttribute('data-dragging-image');
+
+        const files = e.dataTransfer.files;
+        if (files.length > 0 && onUpload) {
+            void onUpload(files);
+        }
+    }, [onUpload]);
+
     return {
         isDragging,
         handleDragOver,
         handleDragEnter,
         handleDragLeave,
+        handleDrop,
         onImageDragStart,
         onImageMouseDown,
         onImageMouseUp,

apps/web/client/src/app/project/[id]/_components/left-panel/image-tab/image-grid.tsx

@@ -11,13 +11,14 @@ interface ImageGridProps {
     projectId: string;
     branchId: string;
     search: string;
+    onUpload: (files: FileList) => Promise<void>;
 }
 
-export const ImageGrid = ({ images, projectId, branchId, search, }: ImageGridProps) => {
+export const ImageGrid = ({ images, projectId, branchId, search, onUpload }: ImageGridProps) => {
     const {
-        handleDragEnter, handleDragLeave, handleDragOver, isDragging,
+        handleDragEnter, handleDragLeave, handleDragOver, handleDrop, isDragging,
         onImageDragStart, onImageDragEnd, onImageMouseDown, onImageMouseUp
-    } = useImageDragDrop();
+    } = useImageDragDrop(onUpload);
 
     return (
         <div className={cn(
@@ -27,6 +28,7 @@ export const ImageGrid = ({ images, projectId, branchId, search, }: ImageGridPro
             onDragEnter={handleDragEnter}
             onDragLeave={handleDragLeave}
             onDragOver={handleDragOver}
+            onDrop={handleDrop}
         >
             <div className="grid grid-cols-2 gap-2">
                 {images.map((image) => (

apps/web/client/src/app/project/[id]/_components/left-panel/image-tab/index.tsx

@@ -83,6 +83,7 @@ export const ImagesTab = observer(() => {
                 projectId={projectId}
                 branchId={branchId}
                 search={search}
+                onUpload={handleUpload}
             />
         </div>
     );