refactored image paste handling to fill unset images successively, then replace last existing image (fixes #981)

javascript/dragdrop.js

@@ -68,13 +68,19 @@ window.addEventListener('paste', e => {
     if ( ! isValidImageList( files ) ) {
         return;
     }
-    [...gradioApp().querySelectorAll('input[type=file][accept="image/x-png,image/gif,image/jpeg"]')]
-        .filter(input => !input.matches('.\\!hidden input[type=file]'))
-        .forEach(input => {
-            input.files = files;
-            input.dispatchEvent(new Event('change'))
-        });
-    [...gradioApp().querySelectorAll('[data-testid="image"]')]
-        .filter(imgWrap => !imgWrap.closest('.\\!hidden'))
-        .forEach(imgWrap => dropReplaceImage( imgWrap, files ));
+
+    const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
+        .filter(el => uiElementIsVisible(el));
+    if ( ! visibleImageFields.length ) {
+        return;
+    }
+    
+    const firstFreeImageField = visibleImageFields
+        .filter(el => el.querySelector('input[type=file]'))?.[0];
+
+    dropReplaceImage(
+        firstFreeImageField ?
+        firstFreeImageField :
+        visibleImageFields[visibleImageFields.length - 1]
+    , files );
 });

script.js

@@ -39,3 +39,24 @@ document.addEventListener("DOMContentLoaded", function() {
     });
     mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
 });
+
+/**
+ * checks that a UI element is not in another hidden element or tab content
+ */
+function uiElementIsVisible(el) {
+    let isVisible = !el.closest('.\\!hidden');
+    if ( ! isVisible ) {
+        return false;
+    }
+
+    while( isVisible = el.closest('.tabitem')?.style.display !== 'none' ) {
+        if ( ! isVisible ) {
+            return false;
+        } else if ( el.parentElement ) {
+            el = el.parentElement
+        } else {
+            break;
+        }
+    }
+    return isVisible;
+}