File Dropzone

Pro

A drop area that leans in when files hover over it, then lists each file with its own progress bar.

Press kit

Upload screenshots

Add up to 4 files for your store page.

Drop files here or browseImages, PDF · up to 10 MB · 4 files max

Customize

Max files4

Max size10MB

Installation

File Dropzone is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy file-dropzone.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { FileDropzone } from "@/components/ui/file-dropzone";

<FileDropzone
  accept="image/*"
  maxFiles={4}
  maxSizeMB={8}
  onUpload={async (file, setProgress) => {
    await uploadScreenshot(file, setProgress);
  }}
/>

Props

13 properties

Property	Type	Default	Description
accept	string	—	Allowed types, in the native accept format, like "image/*,.pdf".
maxFiles	number	5	Most files in the list. With 1, a new file replaces the old one.
maxSizeMB	number	10	Largest file size in megabytes.
onFilesChange	(files: File[]) => void	—	Called with the full list after every add or remove.
onUpload	(file, setProgress) => Promise<void> \| void	—	Your upload. Report 0 to 100 through setProgress and throw to mark a failure. Without it, a short simulated upload runs.
label	string	"Drop files here or browse"	Main line inside the drop area.
hint	string	—	Line under the label. Built from accept, size and count when omitted.
color	string	"#ff784f"	Accent for drag-over and progress.
disabled	boolean	false	Blocks picking and dropping.
name	string	—	Form field name. The native input keeps every listed file, so a plain form submits them.
id	string	—	Id of the file input.
ref	Ref<{ addFiles(files): void; clear(): void }>	—	Adds files from elsewhere, like a paste or a sample, through the same checks, or clears the list.
className	string	—	Extra classes for the wrapper.

Dependencies: motion