Drag image to load image (#7898)

## Summary

<!-- One sentence describing what changed and why. -->
Added feature to drag image into workflow to create a load image node if
the image does not have workflow meta data.

Also added tests for usePaste.ts as I extracted code to be reusable
there and there wasn't any tests.

## Changes

- **What**: <!-- Core functionality added/modified -->
app.ts handleFile updated,
usePaste.ts usePaste updated with new method pasteImageNode

## Review Focus
<!-- Fixes #ISSUE_NUMBER -->
Not sure if it has an issue, just has a notion task.

https://www.notion.so/comfy-org/Drag-in-an-image-that-s-not-a-workflow-and-being-able-to-directly-loading-it-as-Load-Image-2156d73d365080c4851ffc1425e06caf

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->


https://github.com/user-attachments/assets/0403e4f1-2a99-4939-bf01-3d9e8f9834bb

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7898-Drag-image-to-load-image-2e26d73d36508187abdff986e8087370)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
Brian Jemilo II
2026-01-10 14:55:19 -06:00
committed by GitHub
parent 52b94e06a1
commit df1eb32907
3 changed files with 369 additions and 34 deletions

View File

@@ -96,6 +96,7 @@ import { type ComfyWidgetConstructor } from './widgets'
import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
import { extractFileFromDragEvent } from '@/utils/eventUtils'
import { getWorkflowDataFromFile } from '@/scripts/metadata/parser'
import { pasteImageNode } from '@/composables/usePaste'
export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
@@ -1441,6 +1442,13 @@ export class ComfyApp {
const fileName = file.name.replace(/\.\w+$/, '') // Strip file extension
const workflowData = await getWorkflowDataFromFile(file)
if (!workflowData) {
if (file.type.startsWith('image')) {
const transfer = new DataTransfer()
transfer.items.add(file)
pasteImageNode(this.canvas, transfer.items)
return
}
this.showErrorOnFileLoad(file)
return
}