From 8c2e1ce32f04f42251269d21ed12be560ac3cce7 Mon Sep 17 00:00:00 2001
From: Tal Hadad <tal_hd@hotmail.com>
Date: Sun, 31 Jul 2022 00:06:35 +0300
Subject: [PATCH] safer binding to windows events, and fix issues on SSR.

Additionally, fix a potential issue with timout being invoked after destroying.

fixes thecodejack/svelte-file-dropzone#47
---
 src/components/Dropzone.svelte | 28 ++++++++++++++--------------
 src/utils/index.js             |  5 -----
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/Dropzone.svelte b/src/components/Dropzone.svelte
index c639307..a40ffb5 100644
--- a/src/components/Dropzone.svelte
+++ b/src/components/Dropzone.svelte
@@ -8,7 +8,6 @@
     isEvtWithFiles,
     isIeOrEdge,
     isPropagationStopped,
-    onDocumentDragOver,
     TOO_MANY_FILES_REJECTION
   } from "./../utils/index";
   import { onMount, onDestroy, createEventDispatcher } from "svelte";
@@ -257,8 +256,18 @@
     }
   }
 
+  // allow the entire document to be a drag target
+  function onDocumentDragOver(event) {
+    if (preventDropOnDocument) {
+      event.preventDefault();
+    }
+  }
+
   let dragTargetsRef = [];
   function onDocumentDrop(event) {
+    if (!preventDropOnDocument) {
+      return;
+    }
     if (rootRef && rootRef.contains(event.target)) {
       // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
       return;
@@ -284,20 +293,9 @@
     }
   }
 
-  onMount(() => {
-    window.addEventListener("focus", onWindowFocus, false);
-    if (preventDropOnDocument) {
-      document.addEventListener("dragover", onDocumentDragOver, false);
-      document.addEventListener("drop", onDocumentDrop, false);
-    }
-  });
-
   onDestroy(() => {
-    window.removeEventListener("focus", onWindowFocus, false);
-    if (preventDropOnDocument) {
-      document.removeEventListener("dragover", onDocumentDragOver);
-      document.removeEventListener("drop", onDocumentDrop);
-    }
+    // This is critical for canceling the timeout behaviour on `onWindowFocus()`
+    inputRef = null;
   });
 
   function onInputElementClick(event) {
@@ -326,6 +324,8 @@
   }
 </style>
 
+<svelte:window on:focus={onWindowFocus} on:dragover={onDocumentDragOver} on:drop={onDocumentDrop} />
+
 <div
   bind:this={rootRef}
   tabindex="0"
diff --git a/src/utils/index.js b/src/utils/index.js
index 475d665..fec77d0 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -111,11 +111,6 @@ export function isKindFile(item) {
   return typeof item === "object" && item !== null && item.kind === "file";
 }
 
-// allow the entire document to be a drag target
-export function onDocumentDragOver(event) {
-  event.preventDefault();
-}
-
 function isIe(userAgent) {
   return (
     userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1