81 Pro components and page blocks

Get Pro
uibrik

File Dropzone

Pro

Preview

Customize

Concurrency2
Max size25MB
Simulated speed2.5MB/s
Fail rate0.15

Installation

Pro

File Dropzone is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/file-dropzone

Usage

import { FileDropzone } from "@/components/uibrik/file-dropzone/file-dropzone";​<FileDropzone  concurrency={2}  autoUpload  reorderable  simulatedSpeed={2.5}  failRate={0.15}  maxFiles={20}  onChange={(items) => {}}  onComplete={(item) => {}}  // upload={(file, { item, onProgress, signal }) => {}}  // accept={["…"]}  // maxSize={0}  // defaultItems={[{ name: …, size: … }]}  // hint="…"/>

Props

FileDropzone
concurrency
Type number
2
Uploads running at once. The rest wait in line.
autoUpload
Type boolean
true
Start as soon as files arrive. Off, each row waits for its play button.
reorderable
Type boolean
true
Drag rows by their handle to reorder.
simulatedSpeed
Type number
2.5
Speed of simulated uploads, when no upload function is given.
failRate
Type number
0.15
Chance a simulated upload drops partway.
upload
Type (file, { item, onProgress, signal }) => Promise<void>
–
Sends one file. Call onProgress with bytes sent. Pause aborts the signal; resume starts the file again. Leave out to simulate.
accept
Type string[]
–
MIME types or extensions, e.g. ["image/*", ".pdf"]. Other files fail with a reason.
maxSize
Type number
25 MB
Largest file, in bytes.
maxFiles
Type number
20
Most files in the queue.
defaultItems
Type { name; size; type?; status?; loaded?; error?; preview? }[]
–
Rows on mount, such as files already uploaded.
onChange
Type (items: UploadItem[]) => void
–
Every change to the queue, progress included.
onComplete
Type (item: UploadItem) => void
–
Called once a file finishes.
hint
Type string
–
Line under the prompt. Defaults to the accepted types and size limit.
className
Type string
–
Classes for the card.