File Dropzone
ProShare assets
Files upload as soon as you add them.
Installation
ProRequires a Planes Pro license.
npx shadcn add @useplanes/file-dropzone
Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.
Unlock with Planes Pro
$99 once · 110 Pro components · lifetime updates.
<FileDropzone
accept="image/*,.pdf"
maxSize={10 * 1024 * 1024}
maxFiles={6}
upload={async (file, { onProgress, signal }) => {
await uploadToS3(file, { onProgress, signal });
}}
onFilesChange={(files) => setFiles(files)}
/>Use cases
Attachments in a composer
Drop screenshots and logs into a support or chat form and keep writing while they upload.
Import flows
CSV or JSON imports where type and size limits matter and a wrong file should say why.
Media libraries
Image uploads where the readout says how many shots you are carrying before you drop, with thumbnails, cancel mid-flight, and retry when the network drops.
Settings and profiles
Single-file pickers for avatars and documents with multiple={false} and a small maxSize.