From 6c1dda47c08a847e8e7bc21827c9db9386b95ba1 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Wed, 9 Nov 2022 15:21:41 +0530
Subject: [PATCH] Don't change the page when something other than an image or
 text file is dropped into the page (or an image is dropped outside the init
 image box)

---
 ui/index.html      |  2 +-
 ui/media/js/dnd.js | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index efe80c66..1872b4fb 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -297,7 +297,7 @@
 <script src="media/js/auto-save.js?v=6"></script>
 <script src="media/js/main.js?v=9"></script>
 <script src="media/js/themes.js?v=4"></script>
-<script src="media/js/dnd.js?v=7"></script>
+<script src="media/js/dnd.js?v=8"></script>
 <script>
 async function init() {
     await initSettings()
diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 84a37b4e..ab1b97cc 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -1,5 +1,9 @@
 "use strict" // Opt in to a restricted variant of JavaScript
 
+const EXT_REGEX = /(?:\.([^.]+))?$/
+const TEXT_EXTENSIONS = ['txt', 'json']
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'tif', 'tga']
+
 function parseBoolean(stringValue) {
     if (typeof stringValue === 'boolean') {
         return stringValue
@@ -301,7 +305,6 @@ function parseTaskFromText(str) {
         const reName = new RegExp(`${name}\\ *:\\ *(.*)(?:\\r\\n|\\r|\\n)*`, 'igm')
         const match = reName.exec(str);
         if (match) {
-            console.log(match)
             str = str.slice(0, match.index) + str.slice(match.index + match[0].length)
             val = match[1]
         }
@@ -358,12 +361,17 @@ function dropHandler(ev) {
         items = Array.from(ev.dataTransfer.files)
     }
 
-    items = items.filter(item => item.name.toLowerCase().endsWith('.txt') || item.name.toLowerCase().endsWith('.json'))
+    items.forEach(item => {item.file_ext = EXT_REGEX.exec(item.name.toLowerCase())[1]})
 
-    if (items.length > 0) {
-        ev.preventDefault() // Prevent default behavior (Prevent file/content from being opened)
-        items.forEach(readFile)
+    let text_items = items.filter(item => TEXT_EXTENSIONS.includes(item.file_ext))
+    let image_items = items.filter(item => IMAGE_EXTENSIONS.includes(item.file_ext))
+
+    if (image_items.length > 0 && ev.target == initImageSelector) {
+        return // let the event bubble up, so that the Init Image filepicker can receive this
     }
+
+    ev.preventDefault() // Prevent default behavior (Prevent file/content from being opened)
+    text_items.forEach(readFile)
 }
 function dragOverHandler(ev) {
     console.log('Content in drop zone')