Comfy-Org / Comfy-Org/ComfyUI_frontend
WidgetSelectDropdown.getMediaUrl() does not split subfolder from filename, breaking thumbnails for subfolder-prefixed combo values
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
### Prerequisites
- [x] I am running the latest version of ComfyUI
- [x] 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`:
```typescript
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:
```typescript
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
```javascript
```
### Logs
```shell
```
### Additional Context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.