Nodes/ComfyUI-nhknodes/πŸ–ΌοΈ Image Loader With Previews (nhk)
ComfyUI Node

πŸ–ΌοΈ Image Loader With Previews (nhk)

The image loader that finally lets you browse, not guess filenames

By EnashkaΒ·Created 12 months agoΒ·Updated 28 days agoΒ· 23
πŸ–ΌοΈ Image Loader With Previews (nhk)
    • image
    • mask
    • filename
    β—„folder_path/tmp/ComfyUI/outputβ–Ί
    β—„imageβ–Ί
    β—„sort_methodnewest_firstβ–Ί

    This is the pack's flagship node - the README literally calls it out as the standout feature - and for good reason. The stock LoadImage makes you pick from a dropdown of filenames with no visual context, which is brutal when you're hunting for "the good one" among a hundred numbered PNGs. ImageLoaderWithPreviews replaces that with actual thumbnails: a grid of previews you click through, plus sorting that finally lets you find the newest render without squinting at timestamps.

    And unlike the stock loader, it can browse any folder on your system - not just ComfyUI's input directory. If your images live in a download folder, a network share, or a scratch directory, this node can load them directly.

    How it works

    There's a real backend here, not just frontend paint. The node registers three web API endpoints on ComfyUI's server:

    • POST /nhknodes/images - lists and sorts the files in whatever folder you point it at.
    • GET /nhknodes/view - serves thumbnails for the preview grid.
    • GET /nhknodes/files - a plain file listing.

    The frontend extension (image_loader_previews.js) uses those to draw a 4-column thumbnail grid on the node when you expand it. Click a thumbnail to select it and see it full-size on the node; click again to return to the grid. There are navigation arrows for stepping through the folder, and the dropdown widget stays in sync.

    sort_method is the hidden quality-of-life winner - six options: name_asc, name_desc, newest_first (default), oldest_first, recently_modified, oldest_modified. newest_first is the one you'll live in if your workflow is "load the last thing I just generated."

    Inputs: folder_path (defaults to ComfyUI's output directory), image (the filename, from the preview dropdown), sort_method. Outputs are the same trio as the stock loader: image (IMAGE), mask (MASK - the alpha channel if the file has one, a blank mask otherwise), and filename (STRING, extension stripped).

    Installing

    Same pack install, no model downloads:

    cd ComfyUI/custom_nodes
    git clone https://github.com/Enashka/ComfyUI-nhknodes
    

    or ComfyUI Manager β†’ search "NHK Nodes" β†’ install β†’ restart. It lives under nhk/image. The preview UI is frontend JS, so a hard refresh (Ctrl+Shift+R) after updating is worth doing if the grid doesn't appear.

    Where people get burned

    • "I clicked a folder and got nothing." The folder path must exist and be a directory. The node raises a clear error if it's not - read the message, it tells you exactly what's wrong.
    • "It won't let me select." If you don't pick an image, you get ValueError: No image selected. The image field is mandatory; you can't just set a folder and run.
    • Security checks are real. The node validates that the selected file actually lives inside the folder you specified - no path-traversal tricks. If you're hitting an odd "path outside of specified folder" error, you're pointing image at a file in a different directory than folder_path. Fix the folder.
    • Preview grid missing after an update. Frontend files - clear the browser cache.

    The one thing to know: this is a loader, so it re-reads the file on every execution. Don't use it as a dynamic "watch folder" node - it won't auto-refresh your selection mid-queue. But for browsing, previewing, and grabbing the latest render without a filename guessing game, it's the node the pack is worth installing for alone.

    Categorynhk/image

    Inputs (3)

    NameTypeDefaultDescription
    folder_pathSTRING/tmp/ComfyUI/outputDirectory path containing images to load
    imageSTRINGImage filename (select from dropdown with preview on hover)
    sort_methodCOMBOnewest_firstSorting method for image list

    Outputs (3)

    NameTypeDescription
    imageIMAGEβ€”
    maskMASKβ€”
    filenameSTRINGβ€”