nodes/solidlime-Comfyui-Random_Image_Picker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: Add WEB_DIRECTORY and simplify JavaScript widget

Browse Source 
Critical fixes:
- Added WEB_DIRECTORY = './web' to __init__.py (REQUIRED for ComfyUI to load JS)
- Simplified JavaScript implementation based on working custom nodes
- Removed unnecessary imports (ComfyWidgets)
- Cleaner button implementation that actually registers

This should now properly load the JavaScript widget when ComfyUI starts.
This commit is contained in:
solidlime
2026-01-07 21:04:57 +09:00
parent aef43bd2f8
commit f7284990ed
2 changed files with 14 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__init__.py
+2
View File
@@ -6,3 +6,5 @@ Loads single images or random images from folders
from .random_image_picker import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPINGS
__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS']
WEB_DIRECTORY = "./web"
web/random_image_picker.js
+12 -34
View File
@@ -1,5 +1,4 @@
import { app } from "../../scripts/app.js";
import { ComfyWidgets } from "../../scripts/widgets.js";
app.registerExtension({
name: "Comfy.RandomImagePicker",
@@ -9,14 +8,11 @@ app.registerExtension({
const onNodeCreated = nodeType.prototype.onNodeCreated;
nodeType.prototype.onNodeCreated = function () {
const ret = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
const result = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
const node = this;
// Find the image widget
const imageWidget = this.widgets.find(w => w.name === "image");
if (!imageWidget) return ret;
// Create file input button widget
const fileWidget = this.addWidget("button", "📁 Choose File", "file", () => {
// Add browse button
node.addWidget("button", "📁 Choose File", null, () => {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/png,image/jpeg,image/jpg,image/webp,image/bmp,image/gif";
@@ -24,39 +20,21 @@ app.registerExtension({
input.onchange = (e) => {
if (e.target.files && e.target.files[0]) {
const file = e.target.files[0];
const imageWidget = node.widgets.find(w => w.name === "image");
// Create a URL for the file
const reader = new FileReader();
reader.onload = (event) => {
// Get file path (name only, browser security limitation)
const fileName = file.name;
// Try to use the webkitRelativePath or fall back to name
const filePath = file.webkitRelativePath || file.path || fileName;
// Update the image widget value
imageWidget.value = filePath;
console.log("Selected file:", filePath);
// Show notification
app.ui.dialog.show(`File selected: ${fileName}\n\nNote: You may need to enter the full path manually due to browser security restrictions.`);
};
reader.readAsDataURL(file);
if (imageWidget) {
// Update with file name (user needs to provide full path)
imageWidget.value = file.name;
console.log("Selected file:", file.name);
alert(`File selected: ${file.name}\n\nPlease enter the full path to this file in the text field above.`);
}
}
};
input.click();
});
// Add info widget
const infoWidget = this.addWidget("text", "ℹ️ Info",
"Single mode: Select any image file\nFolder mode: File's folder will be used",
() => {},
{ serialize: false }
);
return ret;
return result;
};
}
}