Thumbnail

Thumbnail renders a file’s visual preview, a browser-generated image thumbnail on web, or a placeholder icon when none is available. Set playback to render a <video> element when the file status is "ready" and a playbackUrl exists.

Thumbnail

Placeholder

import { Thumbnail } from "@hyperserve/upload-react";

// With thumbnailUri — renders the preview image
<Thumbnail file={file} />

// Without thumbnailUri — renders the placeholder icon
<Thumbnail file={fileWithNoPreview} />

// Renders a <video> element when file.status is "ready" and playbackUrl is set
<Thumbnail file={file} playback />

Props

Prop	Type	Default	Description
file	FileState	required	The file state object
playback	boolean	false	Render a <video> element when file.playbackUrl is available
controls	boolean	true	Show native video controls (only applies in playback mode)
style	CSSProperties	none	Container styles
className	string	none	Container class
placeholderStyle	CSSProperties	none	Styles for the placeholder container
placeholderClassName	string	none	Class for the placeholder container
placeholder	ReactNode	none	Custom placeholder content (replaces the default icon)
children	(info) => ReactNode	none	Render function receiving { thumbnailUri, playbackUrl, isReady }

Behavior

• Shows the thumbnail from file.thumbnailUri (generated on file add, web only)
• When playback is true and the file is ready, renders a <video> element with the playbackUrl
• Shows a placeholder icon when no thumbnail is available