Grid view: show the file placeholder when a thumbnail image fails to load
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 82/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- nextjs, react, typescript
- Domain
- accessibility, frontend
Research direction
Start with packages/ui/src/elements/DocumentCard/index.tsx and compare its image handling with the Thumbnail component’s load-error fallback. Reproduce with a thumbnail URL that cannot decode as an image, then verify the supplied placeholder appears on failure and a valid replacement source loads. Keep the title, navigation, selection, and keyboard behavior intact.
Written by the indexing model from the issue text.
Description
Payload Version
4.0.0-beta.5 (@payloadcms/ui), Next.js 16.4.3, Node.js 26.12.1
Describe the Bug
The native media grid renders a broken image when a thumbnail URL cannot be decoded as an image. It does not switch to the file placeholder that it already displays when no thumbnail is supplied.
Reproduced in Chromium with PDF and MP4 uploads whose custom adminThumbnail resolver returned the original file URL. The generated native .document-card__thumbnail images finish with complete === true and naturalWidth === 0, while no .document-card__thumbnail--empty placeholder appears. Ordinary image thumbnails in the same grid load correctly.
Our resolver's fallback to the original PDF/video is incorrect and we are fixing it to return null when no image derivative exists. This report is about the independent missing error fallback in the native card, not a request for automatic poster or PDF thumbnail generation.
Reproduction
- Configure an upload collection with a custom
adminThumbnailcallback that returns a PDF/MP4 URL instead of an image. - Upload that file and select the native grid layout.
- The grid shows the browser's broken-image indicator instead of its file placeholder.
The underlying public component can also illustrate this without a storage adapter, inside an existing Payload Admin component:
import { DocumentCard, DocumentIcon } from '@payloadcms/ui'
<DocumentCard
title="example.pdf"
thumbnail={{ src: '/path/to/example.pdf' }}
placeholder={<DocumentIcon />}
/>
The supplied placeholder is used if thumbnail is omitted, but not if its image fails to load. An unavailable image URL has the same unhandled error path by source inspection.
Expected Behavior
When the thumbnail image fails, render the supplied/native file placeholder and keep the title, navigation, selection, and keyboard behavior. Reset the failure state when the thumbnail source changes so a subsequent valid thumbnail can load.
Relevant Code
packages/ui/src/elements/DocumentCard/index.tsx branches on whether thumbnail exists and renders an <img> without an onError fallback. The ordinary Thumbnail component already detects image-load failure and shows a file icon.
Searched existing thumbnail/fallback and broken-grid reports. #6867 describes the older Lexical UploadFeature occurrence, not the new grid DocumentCard.
- Dominant language
- TypeScript
- Stars
- 45.5k
- Forks
- 4.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 302
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from payloadcms/payload
-
Required Lexical field accepts two empty paragraphsPossibly taken @lazerg claimed this 1 day ago. OpenBug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
payloadcms/payload#19222 ·
Maintainers usually reply within 1 day
-
area: ui Bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
payloadcms/payload#19198 ·
Maintainers usually reply within 1 day
-
WhereBuilder throws "Cannot read properties of undefined (reading 'value')" when the list URL filters on a field that is not filterablePossibly taken A pull request linked to this issue is open or already merged. OpenBug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
payloadcms/payload#19002 · 1 comment ·
Maintainers usually reply within 1 day
-
Regression: `findByID` with `disableErrors: true` throws `NotFound` for null/empty ids since 3.91.0Possibly taken @Krrishkumar125 claimed this 9 days ago. Openarea: core Bug invalid-reproduction status: needs-triage v3
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
payloadcms/payload#18935 · 2 comments ·
Maintainers usually reply within 1 day
-
bug: Local API call with req resets req.fallbackLocale to defaultLocalePossibly taken A pull request linked to this issue is open or already merged. Openarea: core Bug created-by: Contributor
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
payloadcms/payload#18768 ·
Maintainers usually reply within 1 day
All issues in payloadcms/payload
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Northeastern-Electric-Racing/FinishLine#4660 ·
Maintainers usually reply within 2 days
-
BeOS .json missingOpen
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
mihaip/infinite-mac#475 ·
-
Let TypeScript accept an initial object in ReactiveDictPossibly taken @yograj-vijay-yadav claimed this today. Openbug good first issue help wanted workshop
Difficulty 2/5 1-3 hours Newbie friendliness 92/100
meteor/meteor#14919 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
marmelab/atomic-crm#401 ·
Maintainers usually reply within 1 day
-
account: profile
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Maintainers usually reply within 5 days