[backport core/1.40] fix: refresh image previews on media upload nodes when refreshing node definitions (#9582)

Backport of #9141 to `core/1.40`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9582-backport-core-1-40-fix-refresh-image-previews-on-media-upload-nodes-when-refreshing-no-31d6d73d36508186a92fe2925cf52b43)
by [Unito](https://www.unito.io)

Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>

src/extensions/core/uploadImage.ts

@@ -2,27 +2,13 @@ import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import {
   type ComfyNodeDef,
   type InputSpec,
-  isComboInputSpecV1
+  isMediaUploadComboInput
 } from '@/schemas/nodeDefSchema'
 
 import { app } from '../../scripts/app'
 
 // Adds an upload button to the nodes
 
-const isMediaUploadComboInput = (inputSpec: InputSpec) => {
-  const [inputName, inputOptions] = inputSpec
-  if (!inputOptions) return false
-
-  const isUploadInput =
-    inputOptions['image_upload'] === true ||
-    inputOptions['video_upload'] === true ||
-    inputOptions['animated_image_upload'] === true
-
-  return (
-    isUploadInput && (isComboInputSpecV1(inputSpec) || inputName === 'COMBO')
-  )
-}
-
 const createUploadInput = (
   imageInputName: string,
   imageInputOptions: InputSpec

src/schemas/nodeDefSchema.ts

@@ -158,6 +158,20 @@ export function isComboInputSpec(
   return isComboInputSpecV1(inputSpec) || isComboInputSpecV2(inputSpec)
 }
 
+export function isMediaUploadComboInput(inputSpec: InputSpec): boolean {
+  const [inputName, inputOptions] = inputSpec
+  if (!inputOptions) return false
+
+  const isUploadInput =
+    inputOptions['image_upload'] === true ||
+    inputOptions['video_upload'] === true ||
+    inputOptions['animated_image_upload'] === true
+
+  return (
+    isUploadInput && (isComboInputSpecV1(inputSpec) || inputName === 'COMBO')
+  )
+}
+
 /**
  * Get the type of an input spec.
  *

src/scripts/app.ts

@@ -90,7 +90,8 @@ import {
   executeWidgetsCallback,
   createNode,
   fixLinkInputSlots,
-  isImageNode
+  isImageNode,
+  isVideoNode
 } from '@/utils/litegraphUtil'
 import {
   createSharedObjectUrl,
@@ -1862,6 +1863,7 @@ export class ComfyApp {
       this.registerNodeDef(nodeId, defs[nodeId])
     }
     // Refresh combo widgets in all nodes including those in subgraphs
+    const nodeOutputStore = useNodeOutputStore()
     forEachNode(this.rootGraph, (node) => {
       const def = defs[node.type]
       // Allow primitive nodes to handle refresh
@@ -1894,6 +1896,12 @@ export class ComfyApp {
           }
         }
       }
+
+      // Re-trigger previews on media nodes (e.g. LoadImage)
+      // to bust browser cache when files are edited externally
+      if (isImageNode(node) || isVideoNode(node)) {
+        nodeOutputStore.refreshNodeOutputs(node)
+      }
     })
 
     await useExtensionService().invokeExtensionsAsync(

src/stores/imagePreviewStore.ts

@@ -388,6 +388,16 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
   }
 
+  function refreshNodeOutputs(node: LGraphNode) {
+    const locatorId = nodeToNodeLocatorId(node)
+    if (!locatorId) return
+
+    const outputs = app.nodeOutputs[locatorId]
+    if (!outputs) return
+
+    nodeOutputs.value[locatorId] = { ...outputs }
+  }
+
   function resetAllOutputsAndPreviews() {
     app.nodeOutputs = {}
     nodeOutputs.value = {}
@@ -433,6 +443,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     setNodePreviewsByExecutionId,
     setNodePreviewsByNodeId,
     updateNodeImages,
+    refreshNodeOutputs,
     syncLegacyNodeImgs,
 
     // Cleanup