From 41c81fca1b308996623d4e8ad39f238f5f29d3c1 Mon Sep 17 00:00:00 2001
From: Eric van der Vlist <vdv@dyomedea.com>
Date: Fri, 17 Mar 2023 19:57:22 +0100
Subject: [PATCH] Adding file drop capability to import GPX files.

---
 src/components/map/Map.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 1932cbf..5d05d6b 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -130,6 +130,28 @@ const Map: Component = () => {
     });
   }
 
+  const dropHandler = (event: any) => {
+    event.preventDefault();
+    console.log({
+      caller: 'Map / dropHandler',
+      event,
+      files: event.dataTransfer.files,
+    });
+    importUrls(event.dataTransfer.files);
+  };
+
+  const dragOverHandler = (event: any) => {
+    event.preventDefault();
+    console.log({ caller: 'Map / dragOverHandler', event });
+  };
+
+  // const dragStartHandler = (event: any) => {
+  //   event.preventDefault();
+  //   event.dataTransfer.effectAllowed = 'all';
+  //   event.dataTransfer.dropEffect = 'move';
+  //   console.log({ caller: 'Map / dragStartHandler', event });
+  // };
+
   if (
     params.lat === '0' &&
     params.lon === '0' &&
@@ -313,7 +335,12 @@ const Map: Component = () => {
   return (
     //<OsmFetch map={getMap} />
     // @ts-ignore
-    <div class='ol-map' ref={target}>
+    <div
+      class='ol-map'
+      ref={target}
+      ondrop={dropHandler}
+      ondragover={dragOverHandler}
+    >
       <Updater />
       <Invitation />
       <Overlays map={getMap} />