Show message on error when loading wf from file (works on drag and drop) (#3466)

web/scripts/app.js

@@ -2157,6 +2157,14 @@ export class ComfyApp {
 		api.dispatchEvent(new CustomEvent("promptQueued", { detail: { number, batchCount } }));
 	}
 
+	showErrorOnFileLoad(file) {
+		this.ui.dialog.show(
+			$el("div", [
+				$el("p", {textContent: `Unable to find workflow in ${file.name}`})
+			]).outerHTML
+		);
+	}
+
 	/**
 	 * Loads workflow data from the specified file
 	 * @param {File} file
@@ -2164,27 +2172,27 @@ export class ComfyApp {
 	async handleFile(file) {
 		if (file.type === "image/png") {
 			const pngInfo = await getPngMetadata(file);
-			if (pngInfo) {
+			if (pngInfo?.workflow) {
-				if (pngInfo.workflow) {
 				await this.loadGraphData(JSON.parse(pngInfo.workflow));
-				} else if (pngInfo.prompt) {
+			} else if (pngInfo?.prompt) {
 				this.loadApiJson(JSON.parse(pngInfo.prompt));
-				} else if (pngInfo.parameters) {
+			} else if (pngInfo?.parameters) {
 				importA1111(this.graph, pngInfo.parameters);
-				}
+			} else {
+				this.showErrorOnFileLoad(file);
 			}
 		} else if (file.type === "image/webp") {
 			const pngInfo = await getWebpMetadata(file);
-			if (pngInfo) {
+			// Support loading workflows from that webp custom node.
-				if (pngInfo.workflow) {
+			const workflow = pngInfo?.workflow || pngInfo?.Workflow;
-					this.loadGraphData(JSON.parse(pngInfo.workflow));
+			const prompt = pngInfo?.prompt || pngInfo?.Prompt;
-				} else if (pngInfo.Workflow) {
+
-					this.loadGraphData(JSON.parse(pngInfo.Workflow)); // Support loading workflows from that webp custom node.
+			if (workflow) {
-				} else if (pngInfo.prompt) {
+				this.loadGraphData(JSON.parse(workflow));
-					this.loadApiJson(JSON.parse(pngInfo.prompt));
+			} else if (prompt) {
-				} else if (pngInfo.Prompt) {
+				this.loadApiJson(JSON.parse(prompt));
-					this.loadApiJson(JSON.parse(pngInfo.Prompt)); // Support loading prompts from that webp custom node.
+			} else {
-				}
+				this.showErrorOnFileLoad(file);
 			}
 		} else if (file.type === "application/json" || file.name?.endsWith(".json")) {
 			const reader = new FileReader();
@@ -2205,7 +2213,11 @@ export class ComfyApp {
 				await this.loadGraphData(JSON.parse(info.workflow));
 			} else if (info.prompt) {
 				this.loadApiJson(JSON.parse(info.prompt));
+			} else {
+				this.showErrorOnFileLoad(file);
 			}
+		} else {
+			this.showErrorOnFileLoad(file);
 		}
 	}