fix image replacement via clipboard paste or drag and drop on PNG Info tab

2 files changed, 24 insertions, 3 deletions

diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index 29e26766..0fb74dba 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -10,13 +10,34 @@ function dropReplaceImage( imgWrap, files ) {
     }
 
     imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
-    window.requestAnimationFrame( () => {
+    const callback = () => {
         const fileInput = imgWrap.querySelector('input[type="file"]');
         if ( fileInput ) {
             fileInput.files = files;
             fileInput.dispatchEvent(new Event('change'));   
         }
-    });
+    };
+    
+    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);
+            if ( 'api/predict/' === input ) {
+                const content = await response.text();
+                window.fetch = oldFetch;
+                window.requestAnimationFrame( () => callback() );
+                return new Response(content, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers
+                })
+            }
+            return response;
+        };        
+    } else {
+        window.requestAnimationFrame( () => callback() );
+    }
 }
 
 function pressClearBtn(hoverElems) {
diff --git a/modules/ui.py b/modules/ui.py
index 0d428b5b..e290b3eb 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -797,7 +797,7 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
     pnginfo_interface = gr.Interface(

         wrap_gradio_call(run_pnginfo),

         inputs=[

-            gr.Image(label="Source", source="upload", interactive=True, type="pil"),

+            gr.Image(elem_id="pnginfo_image", label="Source", source="upload", interactive=True, type="pil"),

         ],

         outputs=[

             gr.HTML(),