diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index c01f66e2d..5aac57f77 100644 --- a/javascript/dragdrop.js +++ b/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 ); }); diff --git a/script.js b/script.js index 7f26e23bd..cf9896053 100644 --- a/script.js +++ b/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; +} \ No newline at end of file