HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Meter
  • Multi Select
  • Native Select
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

File Upload

PreviousNext

A drop zone with a live list of files, progress, retry and image previews, plus a compact picker for an avatar or a single image.

Base UIReact AriaRadix UI
Receipts
Drop files here
Browse or pasteImages, PDF, CSV, ZIP, up to 5.0 MB each, 6 files max
Profile photo

Images, up to 2.0 MB

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/file-upload.json

Usage#

import { FileUpload, FileUploadButton } from "@/components/ui/file-upload"
<FileUpload
  accept="image/*,.pdf"
  maxSize={5 * 1024 * 1024}
  maxFiles={6}
  onUpload={async (file, { onProgress, signal }) => {
    const body = new FormData()
    body.append("file", file)
    await fetch("/api/upload", { method: "POST", body, signal })
    onProgress(100)
  }}
/>
 
<FileUploadButton accept="image/*" maxSize={2 * 1024 * 1024} onChange={setAvatar} />

Parts#

  • Drop zone. Drop files on it, click it or press Enter or Space to browse, or focus it and paste. It lights up while files are dragged over it.
  • Rules. accept takes the same format as a file input, like image/*,.pdf. maxSize is in bytes and maxFiles caps the list. Set multiple={false} to keep one file, which replaces the last one. Files that break a rule are listed under the zone with the reason.
  • File rows. Each file shows its type icon, or a thumbnail for images, with its name, size and progress. A finished file shows a check. A failed file shows why and a retry button. The X cancels an upload or removes the file.
  • onUpload. Called once per file with onProgress, which takes 0 to 100, and an abort signal that fires when the file is removed. Return a promise: resolve when done, or reject with an error whose message is shown on the row. Leave it out and files are marked done as soon as they are added.
  • ref. addFiles(files) adds files as if they were dropped, and clear() empties the list.
  • FileUploadButton. A single image picker with a preview, change and remove. Drop an image on the preview too. Use shape="square" for a logo or a cover.
FieldHover Card

On This Page

InstallationUsageParts