mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-01 22:09:55 +00:00
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:
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user