diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index 96d89dff4..ec0302641 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -2,6 +2,8 @@ import type { Page, Locator } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import dotenv from 'dotenv'
 dotenv.config()
+import * as fs from 'fs'
+import * as path from 'path'
 
 interface Position {
   x: number
@@ -202,6 +204,10 @@ export class ComfyPage {
     await this.resetView()
   }
 
+  public assetPath(fileName: string) {
+    return `./browser_tests/assets/${fileName}`
+  }
+
   async setSetting(settingId: string, settingValue: any) {
     return await this.page.evaluate(
       async ({ id, value }) => {
@@ -238,7 +244,7 @@ export class ComfyPage {
 
   async loadWorkflow(workflowName: string) {
     await this.workflowUploadInput.setInputFiles(
-      `./browser_tests/assets/${workflowName}.json`
+      this.assetPath(`${workflowName}.json`)
     )
     await this.nextFrame()
   }
@@ -300,6 +306,54 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  async dragAndDropFile(fileName: string) {
+    const filePath = this.assetPath(fileName)
+
+    // Read the file content
+    const buffer = fs.readFileSync(filePath)
+
+    // Get file type
+    const getFileType = (fileName: string) => {
+      if (fileName.endsWith('.png')) return 'image/png'
+      if (fileName.endsWith('.webp')) return 'image/webp'
+      if (fileName.endsWith('.json')) return 'application/json'
+      return 'application/octet-stream'
+    }
+
+    const fileType = getFileType(fileName)
+
+    await this.page.evaluate(
+      async ({ buffer, fileName, fileType }) => {
+        const file = new File([new Uint8Array(buffer)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+
+        const dropEvent = new DragEvent('drop', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        })
+
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
+
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+
+        document.dispatchEvent(dropEvent)
+      },
+      { buffer: [...new Uint8Array(buffer)], fileName, fileType }
+    )
+
+    await this.nextFrame()
+  }
+
   async dragNode2() {
     await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
     await this.nextFrame()
diff --git a/browser_tests/assets/edited_workflow.webp b/browser_tests/assets/edited_workflow.webp
new file mode 100644
index 000000000..d0b78b3ff
Binary files /dev/null and b/browser_tests/assets/edited_workflow.webp differ
diff --git a/browser_tests/assets/no_workflow.webp b/browser_tests/assets/no_workflow.webp
new file mode 100644
index 000000000..8f1b08107
Binary files /dev/null and b/browser_tests/assets/no_workflow.webp differ
diff --git a/browser_tests/assets/workflow.webp b/browser_tests/assets/workflow.webp
new file mode 100644
index 000000000..c6c38ddcb
Binary files /dev/null and b/browser_tests/assets/workflow.webp differ
diff --git a/browser_tests/loadWorkflowInMedia.spec.ts b/browser_tests/loadWorkflowInMedia.spec.ts
new file mode 100644
index 000000000..9c0e04737
--- /dev/null
+++ b/browser_tests/loadWorkflowInMedia.spec.ts
@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Load Workflow in Media', () => {
+  ;['workflow.webp', 'edited_workflow.webp', 'no_workflow.webp'].forEach(
+    async (fileName) => {
+      test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
+        await comfyPage.dragAndDropFile(fileName)
+        await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+      })
+    }
+  )
+})
diff --git a/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png b/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png
new file mode 100644
index 000000000..3e122304e
Binary files /dev/null and b/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png b/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png
new file mode 100644
index 000000000..f638cbc86
Binary files /dev/null and b/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png differ
diff --git a/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png b/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png
new file mode 100644
index 000000000..3e122304e
Binary files /dev/null and b/browser_tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png differ
diff --git a/src/scripts/pnginfo.ts b/src/scripts/pnginfo.ts
index 24f5cb46f..d696f9993 100644
--- a/src/scripts/pnginfo.ts
+++ b/src/scripts/pnginfo.ts
@@ -113,9 +113,11 @@ export function getWebpMetadata(file) {
             webp.slice(offset + 8, offset + 8 + chunk_length)
           )
           for (var key in data) {
-            var value = data[key] as string
-            let index = value.indexOf(':')
-            txt_chunks[value.slice(0, index)] = value.slice(index + 1)
+            const value = data[key] as string
+            if (typeof value === 'string') {
+              const index = value.indexOf(':')
+              txt_chunks[value.slice(0, index)] = value.slice(index + 1)
+            }
           }
           break
         }