diff --git a/web/index.html b/web/index.html index da611ddc5..cd95594f8 100644 --- a/web/index.html +++ b/web/index.html @@ -12,28 +12,5 @@ window.graph = app.graph; - - - + diff --git a/web/scripts/app.js b/web/scripts/app.js index 4c0eb5103..580482d00 100644 --- a/web/scripts/app.js +++ b/web/scripts/app.js @@ -300,19 +300,7 @@ class ComfyApp { event.preventDefault(); event.stopPropagation(); const file = event.dataTransfer.files[0]; - - if (file.type === "image/png") { - const pngInfo = await getPngMetadata(file); - if (pngInfo && pngInfo.workflow) { - this.loadGraphData(JSON.parse(pngInfo.workflow)); - } - } else if (file.type === "application/json" || file.name.endsWith(".json")) { - const reader = new FileReader(); - reader.onload = () => { - this.loadGraphData(JSON.parse(reader.result)); - }; - reader.readAsText(file); - } + await this.handleFile(file); }); } @@ -630,6 +618,21 @@ class ComfyApp { this.canvas.draw(true, true); await this.ui.queue.update(); } + + async handleFile(file) { + if (file.type === "image/png") { + const pngInfo = await getPngMetadata(file); + if (pngInfo && pngInfo.workflow) { + this.loadGraphData(JSON.parse(pngInfo.workflow)); + } + } else if (file.type === "application/json" || file.name.endsWith(".json")) { + const reader = new FileReader(); + reader.onload = () => { + this.loadGraphData(JSON.parse(reader.result)); + }; + reader.readAsText(file); + } + } } export const app = new ComfyApp(); diff --git a/web/scripts/ui.js b/web/scripts/ui.js index 42da67724..0bfb69273 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -159,18 +159,16 @@ export class ComfyUI { this.history.update(); }); - var input = document.createElement("input"); - input.setAttribute("type", "file"); - input.setAttribute("accept", ".json,image/png"); - input.style.display = "none"; - document.body.appendChild(input); - - input.addEventListener("change", function () { - var file = input.files[0]; - prompt_file_load(file); + const fileInput = $el("input", { + type: "file", + accept: ".json,image/png", + style: "display: none", + parent: document.body, + onchange: () => { + app.handleFile(fileInput.files[0]); + }, }); - this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [ $el("span", { $: (q) => (this.queueSize = q) }), $el("button.comfy-queue-btn", { textContent: "Queue Prompt", onclick: () => app.queuePrompt(0) }), @@ -214,7 +212,7 @@ export class ComfyUI { }, 0); }, }), - $el("button", { textContent: "Load", onclick: () => {} }), + $el("button", { textContent: "Load", onclick: () => fileInput.click() }), $el("button", { textContent: "Clear", onclick: () => app.graph.clear() }), $el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }), ]);