Skip to content

WidgetSelectDropdown.getMediaUrl() does not split subfolder from filename, breaking thumbnails for subfolder-prefixed combo values #12437

@phazei

Description

@phazei

Prerequisites

  • I am running the latest version of ComfyUI
  • I have custom nodes enabled

What happened?

Broken Thumbnails for Subfolder-Prefixed Image Combo Values in WidgetSelectDropdown

Description

The getMediaUrl() function in WidgetSelectDropdown.vue passes the raw combo widget value as a single filename query parameter to /api/view. When a combo value contains a subfolder path (e.g. ipadapter/Alyson/image.png), the resulting URL is:

/api/view?filename=ipadapter%2FAlyson%2Fimage.png&type=input

The /api/view handler in server.py (line 541) calls os.path.basename(filename), which strips the subfolder portion, then looks for image.png directly in the root input directory. The file isn't there — it's in input/ipadapter/Alyson/ — so the request returns 404 and the thumbnail is broken.

Root Cause

getMediaUrl() at WidgetSelectDropdown.vue:519-528:

function getMediaUrl(
  filename: string,
  type: 'input' | 'output' = 'input'
): string {
  if (!['image', 'video', 'audio', 'mesh'].includes(props.assetKind ?? ''))
    return ''
  const params = new URLSearchParams({ filename, type })
  appendCloudResParam(params, filename)
  return `/api/view?${params}`
}

The function does not split the subfolder prefix out of filename. The /api/view endpoint already supports a separate subfolder query parameter (server.py:535-539), and the codebase already has a utility that performs the correct split — parseImageWidgetValue() in src/utils/imageUtil.ts.

Other parts of the codebase handle this correctly. For example, ResultItemImpl.urlParams in queueStore.ts passes filename and subfolder as separate parameters.

Suggested Fix

Use parseImageWidgetValue() to split the value before building the URL:

import { parseImageWidgetValue } from '@/utils/imageUtil'

function getMediaUrl(
  filename: string,
  type: 'input' | 'output' = 'input'
): string {
  if (!['image', 'video', 'audio', 'mesh'].includes(props.assetKind ?? ''))
    return ''
  const parsed = parseImageWidgetValue(filename)
  const params = new URLSearchParams({
    filename: parsed.filename,
    type: parsed.type !== 'input' ? parsed.type : type
  })
  if (parsed.subfolder) params.set('subfolder', parsed.subfolder)
  appendCloudResParam(params, filename)
  return `/api/view?${params}`
}

Expected Behavior

Thumbnails should load correctly for combo values containing subfolder paths. The URL should be constructed as:

/api/view?filename=image.png&subfolder=ipadapter%2FAlyson&type=input

Environment

  • ComfyUI Frontend with Nodes 2.0 renderer enabled
  • Any custom node providing subfolder-prefixed image combo values

Steps to Reproduce

How to Reproduce

  1. Use any custom node with an image combo input (image_upload: true) whose combo values include subfolder-prefixed paths (e.g. subfolder/image.png)
  2. Enable Nodes 2.0 renderer
  3. Click the image combo widget to open the popup selector
  4. Observe that thumbnails for any subfolder-prefixed image fail to load (broken image icon / 404)
  5. Selecting the image works fine (the preview/execution uses get_annotated_filepath() which handles the full path), but the thumbnail in the dropdown is broken

The built-in LoadImage node is not affected because it uses os.listdir() (non-recursive), so its combo values never contain subfolder prefixes. Any custom node that scans subfolders recursively and returns paths like subfolder/filename.png in its combo values will hit this bug.

How is this affecting you?

Crashes ComfyUI completely

ComfyUI Frontend Version

1.43.18

Browser

Chrome/Chromium

Console Errors

Logs

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Potential BugUntriaged bugPublic APIAffects or interacts with the public API surface (affecting custom node or extension authors)area:uiGeneral user interface and experience improvementsarea:widgets

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions