'Use for Controlnet', Drag'n'Drop (#1501)

* Drop area for Controlnet

* 'Use for Controlnet', DND

ui/media/js/main.js

@@ -517,6 +517,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             const imageRedoBuffer = []
             let buttons = [
                 { text: "Use as Input", on_click: onUseAsInputClick },
+                { text: "Use for Controlnet", on_click: onUseForControlnetClick },
                 [
                     {
                         html: '<i class="fa-solid fa-download"></i> Download Image',
@@ -627,6 +628,10 @@ function onUseAsInputClick(req, img) {
     maskSetting.checked = false
 }
 
+function onUseForControlnetClick(req, img) {
+    controlImagePreview.src = img.src
+}
+
 function getDownloadFilename(img, suffix) {
     const imageSeed = img.getAttribute("data-seed")
     const imagePrompt = img.getAttribute("data-prompt")

ui/plugins/ui/image-editor-improvements.plugin.js

@@ -191,19 +191,32 @@
 
     function createDropAreas(container) {
         // Create two drop areas
-        const dropAreaI2I = document.createElement("div")
+        const dropAreaI2I = createElement("div", {id: "drop-area-I2I"}, ["drop-area"], "Use as Image2Image source")
-        dropAreaI2I.setAttribute("id", "drop-area-I2I")
-        dropAreaI2I.setAttribute("class", "drop-area")
-        dropAreaI2I.innerHTML = "Use as Image2Image source"
         container.appendChild(dropAreaI2I)
         
-        const dropAreaMD = document.createElement("div")
+        const dropAreaMD = createElement("div", {id: "drop-area-MD"}, ["drop-area"], "Extract embedded metadata")
-        dropAreaMD.setAttribute("id", "drop-area-MD")
-        dropAreaMD.setAttribute("class", "drop-area")
-        dropAreaMD.innerHTML = "Extract embedded metadata"
         container.appendChild(dropAreaMD)
         
+        const dropAreaCN = createElement("div", {id: "drop-area-CN"}, ["drop-area"], "Use as Controlnet image")
+        container.appendChild(dropAreaCN)
+        
         // Add event listeners to drop areas
+        dropAreaCN.addEventListener("dragenter", function(event) {
+            event.preventDefault()
+            dropAreaCN.style.backgroundColor = 'darkGreen'
+        })
+        dropAreaCN.addEventListener("dragleave", function(event) {
+            event.preventDefault()
+            dropAreaCN.style.backgroundColor = ''
+        })
+        dropAreaCN.addEventListener("drop", function(event) {
+            event.stopPropagation()
+            event.preventDefault()
+            hideDropAreas()
+
+            getImageFromDropEvent(event, e => controlImagePreview.src=e)
+        })
+
         dropAreaI2I.addEventListener("dragenter", function(event) {
             event.preventDefault()
             dropAreaI2I.style.backgroundColor = 'darkGreen'
@@ -212,16 +225,12 @@
             event.preventDefault()
             dropAreaI2I.style.backgroundColor = ''
         })
-        
+       
-        dropAreaI2I.addEventListener("drop", function(event) {
+        function getImageFromDropEvent(event, callback) {
-            event.stopPropagation();
-            event.preventDefault();
-            hideDropAreas()
-            
             // Find the first image file, uri, or moz-url in the items list
-            let imageItem = null;
+            let imageItem = null
             for (let i = 0; i < event.dataTransfer.items.length; i++) {
-                let item = event.dataTransfer.items[i];
+                let item = event.dataTransfer.items[i]
                 if (item.kind === 'file' && item.type.startsWith('image/')) {
                     imageItem = item;
                     break;
@@ -258,18 +267,22 @@
                     // Create a FileReader object to read the dropped file as a data URL
                     let reader = new FileReader();
                     reader.onload = function(e) {
-                        // Set the src attribute of the img element to the data URL
+                        callback(e.target.result)
-                        imageObj.src = e.target.result;
                     };
                     reader.readAsDataURL(file);
                 } else {
                     // If the item is a URL, retrieve it and use it to load the image
-                    imageItem.getAsString(function(url) {
+                    imageItem.getAsString(callback)
-                        // Set the src attribute of the img element to the URL
-                        imageObj.src = url;
-                    });
                 }
-            }            
+            }
+        }
+
+        dropAreaI2I.addEventListener("drop", function(event) {
+            event.stopPropagation()
+            event.preventDefault()
+            hideDropAreas()
+            
+            getImageFromDropEvent(event, e => imageObj.src=e)
         })
         
         dropAreaMD.addEventListener("dragenter", function(event) {