Comfy-Org / Comfy-Org/ComfyUI_frontend

ComfyUI Drag-and-drop from the Assets panel broken / FULL FIX JUNE 2026

Open Beginner friendly
#13,055 3 comments 2 reactions 0 assignees View on GitHub
area:ui Potential Bug
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Title
**Drag-and-drop from the Assets panel BROKEN FULL FIX** / This new fix restores the wrong (lossy) image instead of the original and reintroduces the image embedded full workflow — `extractFilesFromDragEvent` trusts a browser-synthesized re-encode over the available source URL

## Affected versions
- `comfyui-frontend-package` 1.42.15 (bundled as `dialogService-*.js`)
- Likely all versions containing the current `extractFilesFromDragEvent` implementation — the bug predates 1.42.15 and is not new to this release.

## Summary
_**Dragging an image directly from the Assets panel (or any other in-app gallery rendering a `` of an asset) onto the graph does **not** reliably restore the embedded workflow/prompt metadata, even when the underlying asset file genuinely contains it. Instead, ComfyUI falls back to creating a plain `LoadImage` node, as if the dropped file had no metadata at all.**_

This does **not** happen when dragging the same file from the OS file manager — only when the drag source is an `` already rendered inside the ComfyUI page itself (e.g. the Assets panel grid).

## Root cause
`extractFilesFromDragEvent(e)` (in the bundled `dialogService-*.js`, also present in the frontend source under the file that defines drag/drop file extraction) is implemented as:

```js
async function extractFilesFromDragEvent(e) {
if (!e.dataTransfer) return [];
let t = Array.from(e.dataTransfer.files).filter(e => e.type !== `image/bmp`);
if (t.length > 0) return t;
let n = [`text/uri-list`, `text/x-moz-url`],
r = [...e.dataTransfer.types].find(e => n.includes(e));
if (!r) return [];
let i = e.dataTransfer.getData(r)?.split(`\n`)?.[0];
if (!i) return [];
let a = await (await fetch(i)).blob();
return [new File([a], i, { type: a.type })];
}
```

It prefers `dataTransfer.files`, and only falls back to fetching the genuine resource via `text/uri-list` if `dataTransfer.files` is empty. The `image/bmp` filter shows the author was already aware that browsers synthesize a throwaway re-encoded image file when you drag an in-page `` element (rather than handing over the original bytes) — but the filter only excludes the BMP encoding.

In practice (confirmed on Chromium/Chrome), dragging an `` whose `src` is a same-origin `/api/view?...` URL can populate `dataTransfer.files` with a synthesized file that is **not** BMP (observed: a small re-encoded JPEG, far smaller than the original and stripped of all metadata) while `dataTransfer.types` simultaneously contains a correct `text/uri-list` pointing at the real resource. Because the filter only excludes `image/bmp`, this synthesized non-BMP file passes through, `extractFilesFromDragEvent` returns it instead of the real file, and `handleFile()` correctly determines (correctly, given what it was handed) that there's no embedded workflow — so it falls back to creating a `LoadImage` node.

The exact synthesized format/size is a browser/version implementation detail and isn't a stable signal to filter on. The `text/uri-list` (when present and same-origin) is a much more reliable signal that the drag originated from an in-page image element backed by a real, fetchable resource, and should be preferred over whatever the browser happened to synthesize into `Files`.

## Steps to reproduce
1. Generate or have an existing output PNG with embedded `prompt`/`workflow` metadata.
2. Open it in the Assets panel (`--enable-assets` or default in newer builds where the panel ships).
3. Drag the thumbnail directly from the Assets panel onto the graph canvas (not via the "•••" → "Open as workflow in new tab" action, which works correctly).
4. Observe: a `LoadImage` node is created with no workflow restored, instead of the full graph loading.
5. Compare with: dragging the exact same file from the OS file manager onto the canvas — this works correctly and restores the workflow.

## Expected behavior
Dragging an asset's thumbnail from inside the app should restore its embedded workflow exactly as well as dragging the same file from the OS would — since the panel already has byte-for-byte access to the original resource at the URL the `` is loaded from.

## Suggested fix
Reverse the priority: try the `text/uri-list`/`text/x-moz-url` resource first (when present), and only fall back to `dataTransfer.files` if there is no URL to fetch (i.e. a genuine OS-level file drag, which doesn't populate a URL type at all):

```js
async function extractFilesFromDragEvent(e) {
if (!e.dataTransfer) return [];
let n = [`text/uri-list`, `text/x-moz-url`],
r = [...e.dataTransfer.types].find(t => n.includes(t));
if (r) {
let i = e.dataTransfer.getData(r)?.split(`\n`)?.[0];
if (i) {
try {
let resp = await fetch(i);
if (resp.ok) {
let blob = await resp.blob();
return [new File([blob], i, { type: blob.type })];
}
} catch (_) {
// fall through to dataTransfer.files below
}
}
}
return Array.from(e.dataTransfer.files).filter(f => f.type !== `image/bmp`);
}
```

This preserves existing behavior for real OS file drags (no `text/uri-list` present → unchanged code path) and fixes in-app `` drags by preferring the authoritative same-origin resource over whatever the browser happened to synthesize into `Files`.

I patched and verified this fix locally against a running instance (both the regression case — genuine OS file drag — and the bug case — in-app drag with a synthesized non-BMP file alongside a valid `text/uri-list` — were tested before/after) and can confirm it resolves the issue without affecting normal drag-and-drop.

## Workaround until fixed
Use the asset card's "•••" (More options) → **"Open as workflow in new tab"** action instead of dragging — it already fetches the asset server-side and doesn't hit this code path.

---
Credit: Alex DOYLE FULL Broken Drag&Drop FIX 2026

Contributor guide

Open the contributing guide

Research direction

Search the frontend source for the extractFilesFromDragEvent entry point and compare it with the bundled dialogService implementation. Reproduce a drag from the Assets panel and an OS file drag, then verify that the in-app drag restores the embedded workflow while normal file dragging continues to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.