From eec692fdfda495d27800cc08ddde0b7b0bb1496b Mon Sep 17 00:00:00 2001
From: thewhodidthis <thewhodidthis@fastmail.com>
Date: Wed, 2 Aug 2023 15:21:16 +0100
Subject: [PATCH] js/canvas: do attach drop handler and prevent defaults

---
 src/canvas.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/canvas.js b/src/canvas.js
index 04c34f7..c840daa 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -23,28 +23,40 @@ document.onpaste = function (event) {
     }
 };
 
-(() => {
+// Don't need an IIFE to create a closure in this case.
+{
     const upload = document.getElementById('upload');
     const centralUpload = document.getElementById('central-upload')
 
-    centralUpload.addEventListener('dragenter', () => {
+    centralUpload.addEventListener('dragenter', (e) => {
+        e.stopPropagation()
         upload.parentNode.className = 'area dragging';
     }, false);
 
-    centralUpload.addEventListener('dragleave', () => {
+    centralUpload.addEventListener('dragleave', (e) => {
+        e.stopPropagation()
         upload.parentNode.className = 'area';
     }, false);
 
-    centralUpload.addEventListener('dragdrop', async () => {
-        const file = upload.files[0]
+    centralUpload.addEventListener('dragover', (e) => {
+        e.preventDefault()
+        upload.parentNode.classList.add('over')
+    }, false);
+
+    centralUpload.addEventListener('drop', async (e) => {
+        e.preventDefault()
+
+        const [file] = e.dataTransfer.files
+
         await loadFile(file)
     }, false);
 
     upload.addEventListener('change', async () => {
         const file = upload.files[0]
+
         await loadFile(file)
     }, false);
-})();
+}
 
 async function loadDataUrl(dataUrl, name) {
     const file = await srcToFile(