Skip to content
TrademarkTrademark
Docs
Modules

MediaUpload

Updated: May 14, 2025
View on GitHub

A versatile component for uploading and previewing images. MediaUpload provides a drag-and-drop interface with built-in image compression and preview capabilities.

Aspect ratio

MediaUpload supports different aspect ratios to accommodate various design requirements.

Preview

Display an initial preview image by setting the initialPreviewImage prop.

Empty

Customize the empty state message with the emptyState prop.

Loading

Show a loading spinner while processing uploads.

File handling

Handle uploaded files with the onFileUpload callback.

Compression

By default, MediaUpload compresses images before uploading. You can customize the compression settings or disable it entirely. The MediaUpload uses compressorjs under the hood and compresses images client side.

Props

Type
Default
onFileUpload
(file: File) => Promise<void>—
compress
booleantrue
aspectRatio
string16 / 9
className
string—
style
React.CSSProperties—
initialPreviewImage
stringnull
null
emptyState
React.ReactNodeDrag and drop or click to browse
quality
number0.8
sizes
stringnumber
—
children
React.ReactNode—
convertTypes
string[]["image/png", "image/webp", "image/jpg"]
resizeMaxWidth
number1920
resizeMaxHeight
number1920
resizeWidth
number1200
resizeHeight
number1200
loading
booleanfalse
accept
stringimage/*
…and every FlexProps propinherited—
Edit this page on GitHub