MediaUpload Component

A drag-and-drop file upload component with preview support for images, videos, and audio files. Features file validation, size limits, and multiple file support.

Basic Upload

Drop files here or click to browse

image/*, video/*, audio/* up to 10MB each

Maximum 10 files

<MediaUpload 
  onUpload={(files) => {
    console.log('Files uploaded:', files);
    // Handle file upload
  }}
/>

Single File Upload

Drop files here or click to browse

image/*, video/*, audio/* up to 10MB each

<MediaUpload 
  onUpload={(files) => {
    console.log('File uploaded:', files[0]);
  }}
  maxFiles={1}
/>

Images Only

Drop files here or click to browse

image/* up to 5MB each

Maximum 10 files

<MediaUpload 
  onUpload={(files) => {
    console.log('Images uploaded:', files);
  }}
  acceptedTypes={["image/*"]}
  maxSize={5} // 5MB max
/>

Videos Only

Drop files here or click to browse

video/* up to 50MB each

Maximum 3 files

<MediaUpload 
  onUpload={(files) => {
    console.log('Videos uploaded:', files);
  }}
  acceptedTypes={["video/*"]}
  maxSize={50} // 50MB max
  maxFiles={3}
/>

Audio Files

Drop files here or click to browse

audio/* up to 20MB each

Maximum 10 files

<MediaUpload 
  onUpload={(files) => {
    console.log('Audio files uploaded:', files);
  }}
  acceptedTypes={["audio/*"]}
  maxSize={20} // 20MB max
/>

Specific File Types

Drop files here or click to browse

image/jpeg, image/png, video/mp4 up to 25MB each

Maximum 10 files

<MediaUpload 
  onUpload={(files) => {
    console.log('Files uploaded:', files);
  }}
  acceptedTypes={["image/jpeg", "image/png", "video/mp4"]}
  maxSize={25}
/>

Custom Styling

Drop files here or click to browse

image/*, video/*, audio/* up to 10MB each

Maximum 10 files

<MediaUpload 
  onUpload={(files) => {
    console.log('Files uploaded:', files);
  }}
  class="max-w-md mx-auto"
/>

Props Reference

Prop	Type	Default	Description
onUpload	(files: File[]) => void	required	Callback when files are uploaded
maxFiles	number	10	Maximum number of files allowed
acceptedTypes	string[]	["image/", "video/", "audio/*"]	Accepted MIME types
maxSize	number	10	Maximum file size in MB
className	string	undefined	Additional CSS classes

Common MIME Types

Images

image/* - All images
image/jpeg - JPEG
image/png - PNG
image/gif - GIF
image/webp - WebP

Videos

video/* - All videos
video/mp4 - MP4
video/webm - WebM
video/quicktime - MOV

Audio

audio/* - All audio
audio/mpeg - MP3
audio/wav - WAV
audio/ogg - OGG