Previews
The library handles two kinds of visual preview: a locally-generated thumbnail shown while the file is uploading, and a playback video available once the upload is ready. Both are surfaced through FileState and rendered automatically by the Thumbnail component.
Thumbnails
Section titled “Thumbnails”When a file is added, the library immediately attempts to generate a thumbnail from the video. This is best-effort. Whether a thumbnail can be produced depends on the file’s container format and the browser’s codec support. When generation fails or the format isn’t supported, the Thumbnail component falls back to a placeholder icon automatically.
The thumbnail is stored as a blob URL in FileState.thumbnailUri and is available for rendering as soon as the file enters selected status.
Post-upload playback
Section titled “Post-upload playback”Once a file reaches ready, FileState.playbackUrl is populated with the URL provided by your adapter (via UploadResult, polling, or updateFileStatus). The local thumbnailUri is preserved past ready and acts as a fallback when no playbackUrl is available yet (for example, while a push-driven integrator fetches a signed URL after a webhook arrives).
Use the Thumbnail component’s playback prop to switch from thumbnail to video player automatically:
<Thumbnail file={file} playback />With playback set, the component renders a thumbnail image during upload, falls back to that thumbnail at ready if no playbackUrl exists, and transitions to the player once a playbackUrl is set. On web this is a <video> element; on React Native it is expo-video’s VideoView.
Lifecycle
Section titled “Lifecycle”| Phase | thumbnailUri | playbackUrl |
|---|---|---|
| File added → uploading | blob URL (or null if unsupported) | null |
ready, no URL yet | blob URL preserved as fallback | null |
ready, URL available | blob URL preserved (or remote URL if integrator provided one) | backend URL |
| File removed or provider unmounts | local blob URLs revoked |
The local thumbnail blob URL is revoked only on removeFile and provider unmount, not on the ready transition. If your integration calls updateFileStatus(videoId, "ready", { thumbnailUri }) with a remote URL, any prior local blob URL for that file is revoked at that point.
Platform support
Section titled “Platform support”Thumbnail generation on React Native requires the optional expo-video-thumbnails package. If it is not installed, thumbnailUri is always null and a placeholder is shown.
In-app playback on React Native requires the optional expo-video package. If it is not installed, the playback prop falls back to the thumbnail image.
See also
Section titled “See also”Thumbnailcomponent: API reference and interactive demo