Free
Pro

File Upload

Base UI (Angular) file-upload (Pro) is a dropzone, button, or input that stores File[] through ControlValueAccessor. Copy it in with a license; disabled and error states match the forms kit. It does not upload to a server — you send the files from your submit handler.

When to use

  • Attachments on forms, avatars, and import flows that need a dropzone.
  • When the form model should be File[], not a fake path string.

When not to use

  • Cloud storage UIs with progress per remote object — that is your API layer.
  • Single-file replace with a native input only and no dropzone — a styled file input may suffice.

Install with npx base-ui-cli add file-upload.

Pro

File Upload — part of Base UI Pro

Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Input Variant

This is the default variant. It mimics a standard input field allowing users to see the name of the selected file.

No file chosen
Choose file
No file chosen
Upload Resume

HTML

Button Variant

For designs that require a trigger button, use the button variant. It integrates seamlessly with the Base UI button color and style tokens.


HTML

Dropzone Variant

The dropzone variant creates a large, dashed interactive area. It automatically handles drag-and-drop mechanics and visually updates when dragging files overhead. When files are selected, a more icon button appears next to the count — click it to open a popover listing each file with its size and a remove button.

Drop files here to upload

or click to browse


HTML

Empty, error, disabled

The default label is empty until files are chosen. Bind [(ngModel)] for File[]. Disable the control while an upload is in flight.

No file chosen
Choose file

No file chosen

Uploading…

or click to browse

That file type is not allowed. Use PDF or DOCX.

Keyboard & accessibility

Role
The trigger is a button (or labelled group). Selected files are listed in a popover on the dropzone.
Focus
Enter and Space open the native file dialog. Disabled removes pointer and keyboard activation.

Shortcuts

  • EnterOpen the file dialog from the trigger
  • SpaceOpen the file dialog from the trigger

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add file-upload

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add file-upload
// Paths are relative to aliases.components (default: src/app/components)
import { FileUploadComponent } from './file-upload/file-upload.component';

@Component({
  selector: 'app-your-component',
  imports: [
    FileUploadComponent
  ],
  template: `...`
})
export class YourComponent {}

API for file-upload — generated from JSDoc in the library source.

API reference for file-upload
APIMemberTypeDefaultDescription
base-file-uploadacceptstring'*/*'The accepted file types (e.g. 'image/*', '.pdf'). Defaults to any file.
base-file-uploadmultiplebooleanfalseWhether multiple files can be selected at once.
base-file-uploaddisabledbooleanfalseDisables the file input and drag-and-drop zones. Also set by Angular Forms via `setDisabledState`.
base-file-uploadvariantFileUploadVariant'input'The visual presentation style of the uploader.
base-file-uploadbuttonColorButtonColor'primary'Semantic color variant (only applies when variant is 'button').
base-file-uploadbuttonVariantFileUploadButtonVariant'stroked'Solid or stroked styling (only applies when variant is 'button').
base-file-uploadlabelstring'Choose file'Text label displayed on the button or input field. Used as the `aria-label` when variant is 'icon'.
base-file-upload(fileSelected)File[] — Emitted when files are selected via dialog or drag-and-drop.
base-file-upload(fileRemoved)File — Emitted when a single file is removed from the list.
base-file-upload(filesCleared)void — Emitted when all files are cleared from the list.