Drag generated image into "Input image" canvas does not work

[GuidoBartoli]

Read Troubleshoot

[x] I admit that I have read the Troubleshoot before making this issue.

Describe the problem
After generating an image, if from the interface I try to drag it into an "Input image" panel canvas, it is not transferred and the canvas remains empty. The only way is to save the image to disk and manually reload it inside the panel.

The screenshot below shows this a moment before the drag fails.

Full Console Log
No errors are displayed on the console, but I preface that my system is Linux Mint with Firefox browser, so I attach below all the system information.

             ...-:::::-...                 bartoli@HPZ8 
          .-MMMMMMMMMMMMMMM-.              ------------ 
      .-MMMM`..-:::::::-..`MMMM-.          OS: Linux Mint 21.2 x86_64 
    .:MMMM.:MMMMMMMMMMMMMMM:.MMMM:.        Host: HP Z8 G4 Workstation 
   -MMM-M---MMMMMMMMMMMMMMMMMMM.MMM-       Kernel: 5.15.0-91-generic 
 `:MMM:MM`  :MMMM:....::-...-MMMM:MMM:`    Uptime: 3 days, 8 hours, 10 mins 
 :MMM:MMM`  :MM:`  ``    ``  `:MMM:MMM:    Packages: 2584 (dpkg), 9 (flatpak) 
.MMM.MMMM`  :MM.  -MM.  .MM-  `MMMM.MMM.   Shell: bash 5.1.16 
:MMM:MMMM`  :MM.  -MM-  .MM:  `MMMM-MMM:   Resolution: 1680x1050, 1920x1200 
:MMM:MMMM`  :MM.  -MM-  .MM:  `MMMM:MMM:   DE: Cinnamon 5.8.4 
:MMM:MMMM`  :MM.  -MM-  .MM:  `MMMM-MMM:   WM: Mutter (Muffin) 
.MMM.MMMM`  :MM:--:MM:--:MM:  `MMMM.MMM.   WM Theme: Mint-Y-Dark-Aqua (Mint-Y) 
 :MMM:MMM-  `-MMMMMMMMMMMM-`  -MMM-MMM:    Theme: Mint-Y-Dark-Aqua [GTK2/3] 
  :MMM:MMM:`                `:MMM:MMM:     Icons: Mint-Y-Sand [GTK2/3] 
   .MMM.MMMM:--------------:MMMM.MMM.      Terminal: gnome-terminal 
     '-MMMM.-MMMMMMMMMMMMMMM-.MMMM-'       CPU: Intel Xeon Silver 4214Y (24) @ 3.200GHz 
       '.-MMMM``--:::::--``MMMM-.'         GPU: NVIDIA Quadro RTX 6000/8000 
            '-MMMMMMMMMMMMM-'              Memory: 24236MiB / 31795MiB 
               ``-:::::-``

[lllyasviel]

yes this is reported with firefox for some users
can be solved using chrome but we will take a look later

[agilepeter]

broken for chrome mac
Version 120.0.6099.109 (Official Build) (x86_64)

[mashb1t]

This also happens when accessing Fooocus remotely from another client or via Docker, which is to be expected, as the temp file paths used in the Browser can't be resolved that way.
Are you using Fooocus locally in the browser on the same machine or remotely?

[GuidoBartoli]

This also happens when accessing Fooocus remotely from another client or via Docker, which is to be expected, as the temp file paths used in the Browser can't be resolved that way. Are you using Fooocus locally in the browser on the same machine or remotely?

I’m using it locally from the Firefox browser.

[7sanal7san]

i am using chrome and Edge and firefox, in all of them the same issue is there

[fblissjr]

Same issue here on Mac (arc, chrome, firefox). But seems to be for remote only (running on a different machine on the local network). No issue with Safari for some reason.

[mashb1t]

Labels have been adjusted, see #2998

[BassAzayda]

I created a bookmarklet that should help:

javascript:(function(){let draggedImageData=null;let currentDropZone=null;function handleDragStart(event){const img=event.target;draggedImageData=img.src;}function handleDragOver(event){event.preventDefault();currentDropZone=event.currentTarget;}function handleDrop(event){event.preventDefault();if(!draggedImageData||!currentDropZone){return;}const dropZone=currentDropZone.closest('.image-container > div:first-child');if(!dropZone){return;}fetch(draggedImageData).then(res=> res.blob()).then(blob=>{const file=new File([blob],"dragged-image.png",{type:blob.type});const dummyFileList={0:file,length:1,item:index=> dummyFileList[index]};let dropEvent=new Event('drop',{bubbles:true});Object.defineProperty(dropEvent,'dataTransfer',{value:{files:dummyFileList}});dropZone.dispatchEvent(dropEvent);console.log('Drop event triggered successfully for drop zone');}).catch(error=> console.error('Error creating File from image:',error));draggedImageData=null;currentDropZone=null;}function addEventListeners(){document.querySelectorAll('.thumbnail-item img').forEach(img=>{img.addEventListener('dragstart',handleDragStart);img.addEventListener('dragend',handleDrop);});document.querySelectorAll('.image-container > div:first-child').forEach(dropZone=>{dropZone.addEventListener('dragover',handleDragOver);dropZone.addEventListener('drop',handleDrop);});}addEventListeners();const observer=new MutationObserver(mutationsList=>{for(let mutation of mutationsList){if(mutation.type==='childList'){mutation.addedNodes.forEach(node=>{if(node.matches&&node.matches('.thumbnail-item img')){addEventListeners();}});}}});observer.observe(document.body,{childList:true,subtree:true});console.log('Automatic image drop trigger is now active');})();