PlumUI

File Upload

A dropzone that leans in when you drag, with image previews, per-file progress, retry and validation.

Inputs

Drop files here or click to browse

PNG, JPG or PDF up to 5.0 MB

    Playground

    Tweak the props, the preview and the code follow.

    Drop files here or click to browse

      Props
      5
      <FileUpload
  maxFiles={5}
  onUpload={async (file, progress) => {
    await upload(file, progress)
  }}
/>

      Installation

      npx @plumsydev/plum-ui add file-upload

      Usage

      import { FileUpload } from "@/components/ui/file-upload"
      <FileUpload
  accept="image/*"
  maxSize={5 * 1024 * 1024}
  onUpload={async (file, progress) => {
    // send the file, call progress(0..100) along the way
  }}
/>

      Examples

      Single file

      Company logo

      Upload a logo

      SVG or PNG, square works best

        Errors & retry

        Reject the promise returned by onUpload to show the error state.

        Drop anything

        About a third of uploads fail on purpose. Hit retry.

          API Reference

          FileUpload

          PropTypeDefault
          onUpload

          Does the upload. Defaults to a simulation for demos.

          		(file: File, progress: (pct: number) => void) => Promise<void>—
          accept

          Same syntax as the HTML attribute.

          		string—
          maxSize

          Max bytes per file.

          		number—
          maxFiles

          Max files in the list.

          		numberInfinity
          multiple

          Allow picking several files.

          		booleantrue
          onFilesChange

          Called when the set of finished uploads changes.

          		(files: File[]) => void—
          onReject

          Called for files that fail validation.

          		(file: File, reason: string) => void—
          title / description

          Dropzone copy.

          		ReactNode—

          Notes

          • The dropzone is focusable and opens the file dialog with Enter or Space.
          PreviousFieldNextHover Card