A versatile component for uploading and previewing images. MediaUpload provides a drag-and-drop interface with built-in image compression and preview capabilities.
MediaUpload supports different aspect ratios to accommodate various design requirements.
Display an initial preview image by setting the initialPreviewImage prop.
Customize the empty state message with the emptyState prop.
Show a loading spinner while processing uploads.
Handle uploaded files with the onFileUpload callback.
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.