fix drop image to prompt in modernui

Signed-off-by: Vladimir Mandic <mandic00@live.com>

javascript/dragDrop.js

@@ -1,10 +1,9 @@
-// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
-
 function isValidImageList(files) {
   return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
 }
 
 function dropReplaceImage(imgWrap, files) {
+  log('dropReplaceImage', imgWrap, files);
   if (!isValidImageList(files)) return;
   const tmpFile = files[0];
   imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
@@ -23,7 +22,6 @@ function dropReplaceImage(imgWrap, files) {
   };
 
   if (imgWrap.closest('#pnginfo_image')) {
-    // special treatment for PNG Info tab, wait for fetch request to finish
     const oldFetch = window.fetch;
     window.fetch = async (input, options) => {
       const response = await oldFetch(input, options);
@@ -57,6 +55,7 @@ window.document.addEventListener('dragover', (e) => {
 
 window.document.addEventListener('drop', (e) => {
   const target = e.composedPath()[0];
+  log('dropEvent', e, target);
   if (!target.placeholder) return;
   if (target.placeholder.indexOf('Prompt') === -1) return;
   const imgWrap = target.closest('[data-testid="image"]');
@@ -69,6 +68,7 @@ window.document.addEventListener('drop', (e) => {
 });
 
 window.addEventListener('paste', (e) => {
+  log('pasteEvent', e);
   const { files } = e.clipboardData;
   if (!isValidImageList(files)) return;
   const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]

javascript/imageParams.js

@@ -4,14 +4,10 @@ async function initDragDrop() {
     const target = e.composedPath()[0];
     if (!target.placeholder) return;
     if (target.placeholder.indexOf('Prompt') === -1) return;
-    const tab = get_tab_index('tabs');
-    let promptTarget = '';
-    if (tab === 0) promptTarget = 'txt2img_prompt_image';
-    else if (tab === 1) promptTarget = 'img2img_prompt_image';
-    else if (tab === 2) promptTarget = 'control_prompt_image';
-    else if (tab === 3) promptTarget = 'video_prompt_image';
-    else return;
+    const tabName = getENActiveTab();
+    const promptTarget = `${tabName}_prompt_image`;
     const imgParent = gradioApp().getElementById(promptTarget);
+    log('dropEvent', target, promptTarget, imgParent);
     const fileInput = imgParent.querySelector('input[type="file"]');
     if (!imgParent || !fileInput) return;
     if ((e.dataTransfer?.files?.length || 0) > 0) {

javascript/ui.js

@@ -189,6 +189,7 @@ function get_tab_index(tabId) {
     .forEach((button, i) => {
       if (button.className.indexOf('selected') !== -1) res = i;
     });
+  console.log('get_tab_index', tabId, res);
   return res;
 }