Fix workflow loading from PNG images with both workflow and parameter… (#7154)

…s metadata

- Reorder handleFile() to check workflow before parameters
- Add validation to prevent JSON parse errors from crashing imports
- Fix loadGraphData() to use explicit type validation instead of falsy
check
- Ensures ComfyUI-generated PNGs with both metadata types load the
workflow, not parameters

Fixes issue where large workflows (e.g., 634 nodes) were replaced with
basic A1111 format when importing PNG files.

## Summary

Fixed workflow loading from PNG images to prioritize workflow metadata
over parameters, preventing large workflows from being replaced with
basic A1111 format.

## Changes

- **What**: Reordered `handleFile()` to check workflow before
parameters, added JSON parse error handling and validation, fixed
`loadGraphData()` to use explicit type checking instead of falsy check
- **Dependencies**: None

## Review Focus

The key issue was in `handleFile()` where parameters were checked before
workflow, causing ComfyUI-generated PNGs (which contain both workflow
and parameters metadata) to incorrectly import as A1111 format. The fix
ensures:
1. Workflow is always checked first and validated properly
2. Parameters are only used as a fallback when no workflow exists
3. Invalid/malformed workflow data doesn't crash the import process

Additionally, `loadGraphData()` was using a falsy check (`if
(!graphData)`) which could incorrectly replace valid but falsy values.
Now uses explicit type validation.

Tested with real-world PNG containing 634-node workflow (780KB) +
parameters (1KB) - now correctly loads the workflow instead of
discarding it.

<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

N/A - Backend logic fix, no UI changes

Fixes #6633

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7154-Fix-workflow-loading-from-PNG-images-with-both-workflow-and-parameter-2bf6d73d365081ecb7a6c4bf6b6ccd51)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <DrJKL0424@gmail.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/scripts/app.ts

@@ -1057,7 +1057,13 @@ export class ComfyApp {
     }
 
     let reset_invalid_values = false
-    if (!graphData) {
+    // Use explicit validation instead of falsy check to avoid replacing
+    // valid but falsy values (empty objects, 0, false, etc.)
+    if (
+      !graphData ||
+      typeof graphData !== 'object' ||
+      Array.isArray(graphData)
+    ) {
       graphData = defaultGraph
       reset_invalid_values = true
     }
@@ -1432,6 +1438,36 @@ export class ComfyApp {
       this.loadTemplateData({ templates })
     }
 
+    // Check workflow first - it should take priority over parameters
+    // when both are present (e.g., in ComfyUI-generated PNGs)
+    if (workflow) {
+      let workflowObj: ComfyWorkflowJSON | undefined = undefined
+      try {
+        workflowObj =
+          typeof workflow === 'string' ? JSON.parse(workflow) : workflow
+
+        // Only load workflow if parsing succeeded AND validation passed
+        if (
+          workflowObj &&
+          typeof workflowObj === 'object' &&
+          !Array.isArray(workflowObj)
+        ) {
+          await this.loadGraphData(workflowObj, true, true, fileName, {
+            openSource
+          })
+          return
+        } else {
+          console.error('Invalid workflow structure, trying parameters fallback')
+          this.showErrorOnFileLoad(file)
+        }
+      } catch (err) {
+        console.error('Failed to parse workflow:', err)
+        this.showErrorOnFileLoad(file)
+        // Fall through to check parameters as fallback
+      }
+    }
+
+    // Use parameters as fallback when no workflow exists
     if (parameters) {
       // Note: Not putting this in `importA1111` as it is mostly not used
       // by external callers, and `importA1111` has no access to `app`.
@@ -1444,15 +1480,6 @@ export class ComfyApp {
       return
     }
 
-    if (workflow) {
-      const workflowObj =
-        typeof workflow === 'string' ? JSON.parse(workflow) : workflow
-      await this.loadGraphData(workflowObj, true, true, fileName, {
-        openSource
-      })
-      return
-    }
-
     if (prompt) {
       const promptObj = typeof prompt === 'string' ? JSON.parse(prompt) : prompt
       this.loadApiJson(promptObj, fileName)