From a775acc7b7bdb42f5f3978b18778665410b80f6a Mon Sep 17 00:00:00 2001
From: manugallegob <manuelgallegobarra@gmail.com>
Date: Fri, 31 Jan 2025 11:48:25 +0100
Subject: [PATCH] allow drag and drop multiple images from desktop

---
 .../canvas/use-drop-image-from-desktop.tsx    | 90 +++++++++++--------
 1 file changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/pods/canvas/use-drop-image-from-desktop.tsx b/src/pods/canvas/use-drop-image-from-desktop.tsx
index 3c349489..4f6ff4c0 100644
--- a/src/pods/canvas/use-drop-image-from-desktop.tsx
+++ b/src/pods/canvas/use-drop-image-from-desktop.tsx
@@ -27,52 +27,64 @@ export const useDropImageFromDesktop = (
       e.preventDefault();
       e.stopPropagation();
 
-      const file = e.dataTransfer.files[0];
-      const reader = new FileReader();
+      const files = e.dataTransfer.files;
+
       const { clientX, clientY } = e;
+
       const divCoords = {
         x: clientX - e.currentTarget.offsetLeft,
         y: clientY - e.currentTarget.offsetTop,
       };
 
-      reader.onload = e => {
-        const img = new Image();
-        img.src = e.target?.result as string;
-        img.onload = () => {
-          invariant(stageRef.current);
-          const stage = stageRef.current;
-          const { scrollLeft, scrollTop } = getScrollFromDiv(dropRef);
-          let konvaCoord = calculateScaledCoordsFromCanvasDivCoordinates(
-            stage,
-            divCoords,
-            { x: scrollLeft, y: scrollTop }
-          );
-
-          const positionX =
-            konvaCoord.x -
-            calculateShapeOffsetToXDropCoordinate(konvaCoord.x, 'image');
-          const positionY = konvaCoord.y;
-
-          const newImg = addNewShape('image', positionX, positionY, {
-            imageSrc: img.src,
-          });
-
-          // Preserves aspect ratio
-          const defaultWidth = getImageShapeSizeRestrictions().defaultWidth;
-          const defaultHeight = getImageShapeSizeRestrictions().defaultHeight;
-          updateShapeSizeAndPosition(
-            newImg,
-            { x: positionX, y: positionY },
-            adjustSizeKeepingAspectRatio(
-              { width: img.width, height: img.height },
-              { width: defaultWidth, height: defaultHeight }
-            ),
-            false
-          );
-        };
-      };
+      let positionIncrement = 0;
+
+      Array.from(files).forEach(file => {
+        const reader = new FileReader();
+
+        reader.onload = e => {
+          const img = new Image();
+          img.src = e.target?.result as string;
+
+          img.onload = () => {
+            invariant(stageRef.current);
+            const stage = stageRef.current;
+            const { scrollLeft, scrollTop } = getScrollFromDiv(dropRef);
+            let konvaCoord = calculateScaledCoordsFromCanvasDivCoordinates(
+              stage,
+              divCoords,
+              { x: scrollLeft, y: scrollTop }
+            );
 
-      reader.readAsDataURL(file);
+            const positionX =
+              konvaCoord.x -
+              calculateShapeOffsetToXDropCoordinate(konvaCoord.x, 'image') +
+              positionIncrement;
+
+            const positionY = konvaCoord.y + positionIncrement;
+
+            const newImg = addNewShape('image', positionX, positionY, {
+              imageSrc: img.src,
+            });
+
+            // Preserves aspect ratio
+            const defaultWidth = getImageShapeSizeRestrictions().defaultWidth;
+            const defaultHeight = getImageShapeSizeRestrictions().defaultHeight;
+
+            updateShapeSizeAndPosition(
+              newImg,
+              { x: positionX, y: positionY },
+              adjustSizeKeepingAspectRatio(
+                { width: img.width, height: img.height },
+                { width: defaultWidth, height: defaultHeight }
+              ),
+              false
+            );
+
+            positionIncrement += 40;
+          };
+        };
+        reader.readAsDataURL(file);
+      });
     }
   };