MediaUpload

Updated: May 14, 2025

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

MediaUpload

Drag and drop or click to browse

<MediaUpload />

Aspect ratio

MediaUpload supports different aspect ratios to accommodate various design requirements.

Aspect ratio

Drag and drop or click to browse

<MediaUpload />
<MediaUpload aspectRatio="4 / 3" />

Preview

Display an initial preview image by setting the initialPreviewImage prop.

Preview

Drag and drop or click to browse

<MediaUpload 
  initialPreviewImage="/image.jpg" 
/>

Empty

Customize the empty state message with the emptyState prop.

Empty

Add cover image

<MediaUpload
  emptyState={
    <Column gap="8" fill center align="center">
      <Icon name="image" size="m" />
      <Text variant="label-default-s">Add cover image</Text>
    </Column>
  } 
/>

Loading

Show a loading spinner while processing uploads.

Loading

<MediaUpload loading />

File handling

Handle uploaded files with the onFileUpload callback.

File handling

const handleFileUpload = async (file: File) => {
  try {
    // Upload file to your server or storage service
    const response = await uploadToServer(file);
    console.log('File uploaded successfully:', response);
  } catch (error) {
    console.error('Error uploading file:', error);
  }
};

<MediaUpload
  onFileUpload={handleFileUpload}
/>

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.

Compression

<MediaUpload 
  compress
  quality={0.6}
  resizeMaxWidth={1280}
  resizeMaxHeight={720}
  convertTypes={["image/webp", "image/jpeg"]}
/>

<MediaUpload
  compress={false}
/>

Props

Prop	Type	Default
onFileUpload	(file: File) => Promise<void>	—
compress	truefalse	true
aspectRatio	string	'16 / 9'
initialPreviewImage	stringnull	null
emptyState	React.ReactNode	'Drag and drop or click to browse'
quality	number	0.8
sizes	string	—
convertTypes	string[]	['image/png', 'image/webp', 'image/jpg']
resizeMaxWidth	number	1920
resizeMaxHeight	number	1920
resizeWidth	number	1200
resizeHeight	number	1200
loading	truefalse	false
accept	string	'image/*'
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

ModulesHeadingLink

ModulesMeta

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club