File Upload

A native file picker that also accepts a drag and drop.

Overview

FileUpload keeps a hidden file input. The dropzone is a button, so keyboard users open the same picker. Dropping files uses the same validation as the picker. A selected file stays pending until progress is set. An error shows a retry and a remove control. The list uses the same width as the dropzone.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add file-upload

Usage

import { FileUpload, FileUploadDropzone, FileUploadList } from "@/components/ui/file-upload";

export function ResumeUpload() {
  return (
    <FileUpload accept=".pdf,.doc,.docx" maxSize={5_000_000}>
      <FileUploadDropzone>Drop a resume, or click to browse</FileUploadDropzone>
      <FileUploadList />
    </FileUpload>
  );
}

Examples

Avatar

A single image replaces the current portrait.

SK

Document

Limit the picker to documents and a maximum size.

Multiple images

multiple keeps every accepted image in the list.

File states

A long name truncates. Uploading, uploaded, failed, and pending rows share the dropzone width.

  • a-very-long-file-name-that-should-not-resize-the-upload-component.pdfUploading...
  • portrait.pngUploaded
  • standup-notes.mp3
  • product-walkthrough.mp4Uploaded
  • package.zipUpload failed

In practice

A job application asks for a resume, explains the file rules, and offers Submit and Cancel.

PDF or Word, up to 2 MB. Used for the open design role.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
acceptstring—Native accept filter, including extensions and MIME types.
multipleboolean—Allows more than one file.
maxSizenumber—Maximum size in bytes. Larger files are listed with an error.
onFilesChange(files) => void—Called when files are added or removed.

Accessibility

  • The dropzone is a button and opens the native picker.
  • The file input stays available to assistive technology.
  • Errors use role="alert".
  • Each file can be removed with a named button.