$99 launch price

Components

File Dropzone

Pro

Share 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.