Add PreviewToLoad node for bridging preview images to LoadImage nodes

Previews an image (like PreviewImage) and saves a copy to input/ so a
LoadImage node can reference it.  JS extension adds a target-node-ID
widget and "Send to Load Image" button that updates the target's combo.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

__init__.py

@@ -6,9 +6,13 @@ from .string_utils import (
     NODE_CLASS_MAPPINGS as _string_class_mappings,
     NODE_DISPLAY_NAME_MAPPINGS as _string_display_mappings,
 )
+from .image_preview import (
+    NODE_CLASS_MAPPINGS as _image_class_mappings,
+    NODE_DISPLAY_NAME_MAPPINGS as _image_display_mappings,
+)
 
-NODE_CLASS_MAPPINGS = {**_json_class_mappings, **_string_class_mappings}
+NODE_CLASS_MAPPINGS = {**_json_class_mappings, **_string_class_mappings, **_image_class_mappings}
-NODE_DISPLAY_NAME_MAPPINGS = {**_json_display_mappings, **_string_display_mappings}
+NODE_DISPLAY_NAME_MAPPINGS = {**_json_display_mappings, **_string_display_mappings, **_image_display_mappings}
 
 WEB_DIRECTORY = "./web"
 

image_preview.py

@@ -0,0 +1,111 @@
+import json
+import os
+import random
+
+import numpy as np
+from PIL import Image
+from PIL.PngImagePlugin import PngInfo
+
+import folder_paths
+from comfy.cli_args import args
+
+
+class JDL_PreviewToLoad:
+    """Previews an image and saves a copy to input/ for use by LoadImage nodes."""
+
+    def __init__(self):
+        self.output_dir = folder_paths.get_temp_directory()
+        self.type = "temp"
+        self.prefix_append = "_temp_" + ''.join(
+            random.choice("abcdefghijklmnopqrstupvxyz") for _ in range(5)
+        )
+        self.compress_level = 1
+
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "required": {
+                "images": ("IMAGE",),
+                "filename": ("STRING", {"default": "preview"}),
+            },
+            "hidden": {
+                "prompt": "PROMPT",
+                "extra_pnginfo": "EXTRA_PNGINFO",
+            },
+        }
+
+    RETURN_TYPES = ()
+    FUNCTION = "preview_and_save"
+    OUTPUT_NODE = True
+    CATEGORY = "utils/image"
+
+    def preview_and_save(self, images, filename="preview", prompt=None, extra_pnginfo=None):
+        # Save to temp/ for preview (same as PreviewImage)
+        filename_prefix = "ComfyUI" + self.prefix_append
+        full_output_folder, fname, counter, subfolder, filename_prefix = (
+            folder_paths.get_save_image_path(
+                filename_prefix, self.output_dir,
+                images[0].shape[1], images[0].shape[0]
+            )
+        )
+
+        results = []
+        for batch_number, image in enumerate(images):
+            i = 255.0 * image.cpu().numpy()
+            img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8))
+
+            metadata = None
+            if not args.disable_metadata:
+                metadata = PngInfo()
+                if prompt is not None:
+                    metadata.add_text("prompt", json.dumps(prompt))
+                if extra_pnginfo is not None:
+                    for x in extra_pnginfo:
+                        metadata.add_text(x, json.dumps(extra_pnginfo[x]))
+
+            temp_file = f"{fname}_{counter:05}_.png"
+            img.save(
+                os.path.join(full_output_folder, temp_file),
+                pnginfo=metadata, compress_level=self.compress_level,
+            )
+            results.append({
+                "filename": temp_file,
+                "subfolder": subfolder,
+                "type": self.type,
+            })
+            counter += 1
+
+        # Save first image to input/ for LoadImage consumption
+        input_dir = folder_paths.get_input_directory()
+        safe_name = os.path.basename(filename).strip().strip(".")
+        if not safe_name:
+            safe_name = "preview"
+        input_filename = f"{safe_name}.png"
+
+        first_image = 255.0 * images[0].cpu().numpy()
+        first_img = Image.fromarray(np.clip(first_image, 0, 255).astype(np.uint8))
+
+        metadata = None
+        if not args.disable_metadata:
+            metadata = PngInfo()
+            if prompt is not None:
+                metadata.add_text("prompt", json.dumps(prompt))
+            if extra_pnginfo is not None:
+                for x in extra_pnginfo:
+                    metadata.add_text(x, json.dumps(extra_pnginfo[x]))
+
+        first_img.save(
+            os.path.join(input_dir, input_filename),
+            pnginfo=metadata, compress_level=4,
+        )
+
+        return {"ui": {"images": results, "input_filename": [input_filename]}}
+
+
+NODE_CLASS_MAPPINGS = {
+    "JDL_PreviewToLoad": JDL_PreviewToLoad,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "JDL_PreviewToLoad": "Preview to Load Image",
+}

web/image_preview.js

@@ -0,0 +1,68 @@
+import { app } from "../../scripts/app.js";
+
+app.registerExtension({
+    name: "jdl.preview.to.load",
+
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {
+        if (nodeData.name !== "JDL_PreviewToLoad") return;
+
+        const origOnNodeCreated = nodeType.prototype.onNodeCreated;
+        nodeType.prototype.onNodeCreated = function () {
+            origOnNodeCreated?.apply(this, arguments);
+
+            this.addWidget("number", "load_image_node_id", 0, (v) => {}, {
+                min: 0,
+                max: 99999,
+                step: 10,
+                precision: 0,
+            });
+
+            this.addWidget("button", "Send to Load Image", null, () => {
+                const nodeIdWidget = this.widgets?.find(w => w.name === "load_image_node_id");
+                if (!nodeIdWidget) return;
+
+                const targetId = Math.round(nodeIdWidget.value);
+                const targetNode = app.graph.getNodeById(targetId);
+                if (!targetNode) {
+                    console.warn("[PreviewToLoad] No node found with ID:", targetId);
+                    return;
+                }
+
+                const filename = this.last_input_filename;
+                if (!filename) {
+                    console.warn("[PreviewToLoad] No filename available. Run the workflow first.");
+                    return;
+                }
+
+                const imageWidget = targetNode.widgets?.find(w => w.name === "image");
+                if (!imageWidget) {
+                    console.warn("[PreviewToLoad] Target node has no 'image' widget.");
+                    return;
+                }
+
+                // Add filename to combo options if not already present
+                if (imageWidget.options?.values && !imageWidget.options.values.includes(filename)) {
+                    imageWidget.options.values.push(filename);
+                }
+
+                imageWidget.value = filename;
+                if (imageWidget.callback) {
+                    imageWidget.callback(filename);
+                }
+
+                app.graph.setDirtyCanvas(true, true);
+            });
+
+            this.setSize(this.computeSize());
+        };
+
+        const origOnExecuted = nodeType.prototype.onExecuted;
+        nodeType.prototype.onExecuted = function (output) {
+            origOnExecuted?.apply(this, arguments);
+
+            if (output?.input_filename?.length) {
+                this.last_input_filename = output.input_filename[0];
+            }
+        };
+    },
+});