Batch Drag & Drop Images (#8282)

## Summary

<!-- One sentence describing what changed and why. -->
Added feature to drag and drop multiple images into the UI and connect
them with a Batch Images node with tests to add convenience for users.
Only works with a group of images, mixing files not supported.

## Review Focus
<!-- Critical design decisions or edge cases that need attention -->
I've updated our usage of Litegraph.createNode, honestly, that method is
pretty bad, onNodeCreated option method doesn't even return the node
created. I think I will probably go check out their repo to do a PR over
there. Anyways, I made a createNode method to avoid race conditions when
creating nodes for the paste actions. Will allow us to better
programmatically create nodes that do not have workflows that also need
to be connected to other nodes.

<!-- If this PR fixes an issue, uncomment and update the line below -->

https://www.notion.so/comfy-org/Implement-Multi-image-drag-and-drop-to-canvas-2eb6d73d36508195ad8addfc4367db10

## Screenshots (if applicable)

https://github.com/user-attachments/assets/d4155807-56e2-4e39-8ab1-16eda90f6a53

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8282-Batch-Drag-Drop-Images-2f16d73d365081c1ab31ce9da47a7be5)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Austin Mroz <austin@comfy.org>

src/utils/__tests__/eventUtils.test.ts

@@ -33,6 +33,45 @@ describe('eventUtils', () => {
       expect(actual).toBe(fileWithWorkflowMaybeWhoKnows)
     })
 
+    it('should handle drops with multiple image files', async () => {
+      const imageFile1 = new File([new Uint8Array()], 'image1.png', {
+        type: 'image/png'
+      })
+      const imageFile2 = new File([new Uint8Array()], 'image2.jpg', {
+        type: 'image/jpeg'
+      })
+
+      const dataTransfer = new DataTransfer()
+      dataTransfer.items.add(imageFile1)
+      dataTransfer.items.add(imageFile2)
+
+      const event = new FakeDragEvent('drop', { dataTransfer })
+
+      const actual = await extractFileFromDragEvent(event)
+      expect(actual).toBeDefined()
+      expect((actual as FileList).length).toBe(2)
+      expect((actual as FileList)[0]).toBe(imageFile1)
+      expect((actual as FileList)[1]).toBe(imageFile2)
+    })
+
+    it('should return undefined when dropping multiple non-image files', async () => {
+      const file1 = new File([new Uint8Array()], 'file1.txt', {
+        type: 'text/plain'
+      })
+      const file2 = new File([new Uint8Array()], 'file2.txt', {
+        type: 'text/plain'
+      })
+
+      const dataTransfer = new DataTransfer()
+      dataTransfer.items.add(file1)
+      dataTransfer.items.add(file2)
+
+      const event = new FakeDragEvent('drop', { dataTransfer })
+
+      const actual = await extractFileFromDragEvent(event)
+      expect(actual).toBe(undefined)
+    })
+
     // Skip until we can setup MSW
     it.skip('should handle drops with URLs', async () => {
       const urlWithWorkflow = 'https://fakewebsite.notreal/fake_workflow.json'

src/utils/eventUtils.ts

@@ -1,14 +1,14 @@
 export async function extractFileFromDragEvent(
   event: DragEvent
-): Promise<File | undefined> {
+): Promise<File | FileList | undefined> {
   if (!event.dataTransfer) return
 
-  // Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
-  if (
-    event.dataTransfer.files.length &&
-    event.dataTransfer.files[0].type !== 'image/bmp'
-  ) {
-    return event.dataTransfer.files[0]
+  const { files } = event.dataTransfer
+  // Dragging from Chrome->Firefox there is a file, but it's a bmp, so ignore it
+  if (files.length === 1 && files[0].type !== 'image/bmp') {
+    return files[0]
+  } else if (files.length > 1 && Array.from(files).every(hasImageType)) {
+    return files
   }
 
   // Try loading the first URI in the transfer list
@@ -25,3 +25,7 @@ export async function extractFileFromDragEvent(
   const blob = await response.blob()
   return new File([blob], uri, { type: blob.type })
 }
+
+function hasImageType({ type }: File): boolean {
+  return type.startsWith('image')
+}

src/utils/litegraphUtil.test.ts

@@ -1,13 +1,97 @@
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type {
+  LGraph,
+  LGraphCanvas,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
 import type { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
 import type { IWidget } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import {
   compressWidgetInputSlots,
+  createNode,
   migrateWidgetsValues
 } from '@/utils/litegraphUtil'
 
+vi.mock('@/lib/litegraph/src/litegraph', () => ({
+  LiteGraph: {
+    createNode: vi.fn()
+  }
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn(() => ({
+    addAlert: vi.fn(),
+    add: vi.fn(),
+    remove: vi.fn()
+  }))
+}))
+
+vi.mock('@/i18n', () => ({
+  t: vi.fn((key: string) => key)
+}))
+
+function createMockCanvas(overrides: Partial<LGraphCanvas> = {}): LGraphCanvas {
+  const mockGraph = {
+    add: vi.fn((node) => node),
+    change: vi.fn()
+  } satisfies Partial<LGraph> as unknown as LGraph
+  const mockCanvas: Partial<LGraphCanvas> = {
+    graph_mouse: [100, 200],
+    graph: mockGraph,
+    ...overrides
+  }
+  return mockCanvas as LGraphCanvas
+}
+
+describe('createNode', () => {
+  beforeEach(vi.clearAllMocks)
+
+  it('should create a node successfully', async () => {
+    const mockNode = { pos: [0, 0] }
+    vi.mocked(LiteGraph.createNode).mockReturnValue(mockNode as LGraphNode)
+
+    const mockCanvas = createMockCanvas()
+    const result = await createNode(mockCanvas, 'LoadImage')
+
+    expect(LiteGraph.createNode).toHaveBeenCalledWith('LoadImage')
+    expect(mockNode.pos).toEqual([100, 200])
+    expect(mockCanvas.graph!.add).toHaveBeenCalledWith(mockNode)
+    expect(mockCanvas.graph!.change).toHaveBeenCalled()
+    expect(result).toBe(mockNode)
+  })
+
+  it('should return null when name is empty', async () => {
+    const mockCanvas = createMockCanvas()
+    const result = await createNode(mockCanvas, '')
+
+    expect(LiteGraph.createNode).not.toHaveBeenCalled()
+    expect(result).toBeNull()
+  })
+
+  it('should handle graph being null', async () => {
+    const mockNode = { pos: [0, 0] }
+    const mockCanvas = createMockCanvas({ graph: null })
+    vi.mocked(LiteGraph.createNode).mockReturnValue(mockNode as LGraphNode)
+
+    const result = await createNode(mockCanvas, 'LoadImage')
+
+    expect(mockNode.pos).toEqual([0, 0])
+    expect(result).toBeNull()
+  })
+  it('should set position based on canvas graph_mouse', async () => {
+    const mockCanvas = createMockCanvas({ graph_mouse: [250, 350] })
+    const mockNode = { pos: [0, 0] }
+    vi.mocked(LiteGraph.createNode).mockReturnValue(mockNode as LGraphNode)
+
+    await createNode(mockCanvas, 'LoadAudio')
+
+    expect(mockNode.pos).toEqual([250, 350])
+  })
+})
+
 describe('migrateWidgetsValues', () => {
   it('should remove widget values for forceInput inputs', () => {
     const inputDefs: Record<string, InputSpec> = {

src/utils/litegraphUtil.ts

@@ -1,9 +1,14 @@
 import _ from 'es-toolkit/compat'
 
-import type { ColorOption, LGraph } from '@/lib/litegraph/src/litegraph'
+import type {
+  ColorOption,
+  LGraph,
+  LGraphCanvas
+} from '@/lib/litegraph/src/litegraph'
 import {
   LGraphGroup,
   LGraphNode,
+  LiteGraph,
   Reroute,
   isColorable
 } from '@/lib/litegraph/src/litegraph'
@@ -18,6 +23,8 @@ import type {
   WidgetCallbackOptions
 } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { t } from '@/i18n'
 
 type ImageNode = LGraphNode & { imgs: HTMLImageElement[] | undefined }
 type VideoNode = LGraphNode & {
@@ -25,6 +32,38 @@ type VideoNode = LGraphNode & {
   imgs: HTMLVideoElement[] | undefined
 }
 
+/**
+ * Extract & Promisify Litegraph.createNode to allow for positioning
+ * @param canvas
+ * @param name
+ */
+export async function createNode(
+  canvas: LGraphCanvas,
+  name: string
+): Promise<LGraphNode | null> {
+  if (!name) {
+    return null
+  }
+
+  const {
+    graph,
+    graph_mouse: [posX, posY]
+  } = canvas
+  const newNode = LiteGraph.createNode(name)
+  await new Promise((r) => setTimeout(r, 0))
+
+  if (newNode && graph) {
+    newNode.pos = [posX, posY]
+    const addedNode = graph.add(newNode) ?? null
+
+    if (addedNode) graph.change()
+    return addedNode
+  } else {
+    useToastStore().addAlert(t('assetBrowser.failedToCreateNode'))
+    return null
+  }
+}
+
 export function isImageNode(node: LGraphNode | undefined): node is ImageNode {
   if (!node) return false
   return (