repair file paste for Firefox from #10615

remove animation when pasting files into prompt
rework two dragdrop js files into one

2 files changed, 41 insertions, 30 deletions

diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index fd6b3154..aa79871a 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -48,12 +48,27 @@ function dropReplaceImage(imgWrap, files) {
     }
 }
 
+function eventHasFiles(e) {
+    if (!e.dataTransfer || !e.dataTransfer.files) return false;
+    if (e.dataTransfer.files.length > 0) return true;
+    if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true;
+
+    return false;
+}
+
+function dragDropTargetIsPrompt(target) {
+    if (!(target?.placeholder?.indexOf("Prompt") >= 0)) return true;
+    if (target?.parentNode?.parentNode) return true;
+    return false;
+}
+
 window.document.addEventListener('dragover', e => {
     const target = e.composedPath()[0];
-    const imgWrap = target.closest('[data-testid="image"]');
-    if (e.dataTransfer.files.length == 0 || (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1)) {
-        return;
-    }
+    if (!eventHasFiles(e)) return;
+
+    var targetImage = target.closest('[data-testid="image"]');
+    if (!dragDropTargetIsPrompt(target) && !targetImage) return;
+
     e.stopPropagation();
     e.preventDefault();
     e.dataTransfer.dropEffect = 'copy';
@@ -61,17 +76,31 @@ window.document.addEventListener('dragover', e => {
 
 window.document.addEventListener('drop', e => {
     const target = e.composedPath()[0];
-    if (e.dataTransfer.files.length == 0 || target.placeholder.indexOf("Prompt") == -1) {
-        return;
+    if (!eventHasFiles(e)) return;
+
+    if (dragDropTargetIsPrompt(target)) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
+
+        const imgParent = gradioApp().getElementById(prompt_target);
+        const files = e.dataTransfer.files;
+        const fileInput = imgParent.querySelector('input[type="file"]');
+        if (fileInput) {
+            fileInput.files = files;
+            fileInput.dispatchEvent(new Event('change'));
+        }
     }
-    const imgWrap = target.closest('[data-testid="image"]');
-    if (!imgWrap) {
+
+    var targetImage = target.closest('[data-testid="image"]');
+    if (targetImage) {
+        e.stopPropagation();
+        e.preventDefault();
+        const files = e.dataTransfer.files;
+        dropReplaceImage(targetImage, files);
         return;
     }
-    e.stopPropagation();
-    e.preventDefault();
-    const files = e.dataTransfer.files;
-    dropReplaceImage(imgWrap, files);
 });
 
 window.addEventListener('paste', e => {
diff --git a/javascript/imageParams.js b/javascript/imageParams.js
deleted file mode 100644
index 0cdd717a..00000000
--- a/javascript/imageParams.js
+++ /dev/null
@@ -1,18 +0,0 @@
-window.onload = (function() {
-    window.addEventListener('drop', e => {
-        const target = e.composedPath()[0];
-        if (e.dataTransfer.files.length == 0 || target.placeholder.indexOf("Prompt") == -1) return;
-
-        let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
-
-        e.stopPropagation();
-        e.preventDefault();
-        const imgParent = gradioApp().getElementById(prompt_target);
-        const files = e.dataTransfer.files;
-        const fileInput = imgParent.querySelector('input[type="file"]');
-        if (fileInput) {
-            fileInput.files = files;
-            fileInput.dispatchEvent(new Event('change'));
-        }
-    });
-});