File Upload

Ply 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 ply-ui-cli add file-upload.

Pro

File Upload — part of Ply 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

<ply-file-upload variant="input" label="Upload Resume" accept=".pdf"></ply-file-upload>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-file-upload-example',
  imports: [
    FileUploadComponent
  ],
  template: `...`
})
export class FileUploadExampleComponent {}

Install

bash

npx ply-ui-cli add file-upload

Button Variant

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

HTML

<ply-file-upload 
  variant="button" 
  buttonVariant="solid" 
  buttonColor="primary" 
  label="Upload Document">
</ply-file-upload>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-file-upload-example',
  imports: [
    FileUploadComponent
  ],
  template: `...`
})
export class FileUploadExampleComponent {}

Install

bash

npx ply-ui-cli add file-upload

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

<ply-file-upload variant="dropzone" multiple="true" label="Drop files here to upload"
  (fileSelected)="onFiles($event)"
  (fileRemoved)="onRemoved($event)"
  (filesCleared)="onCleared()">
</ply-file-upload>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-file-upload-example',
  imports: [
    FileUploadComponent
  ],
  template: `...`
})
export class FileUploadExampleComponent {}

Install

bash

npx ply-ui-cli add file-upload

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.

Form value

No file chosen

Choose file

No file chosen

Uploading…

or click to browse

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

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-file-upload-example',
  imports: [
    FileUploadComponent
  ],
  template: `...`
})
export class FileUploadExampleComponent {}

Install

bash

npx ply-ui-cli add file-upload

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 ply-ui-cli add file-upload

API Reference

For AI agents

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

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-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
API	Member	Type	Default	Description
`ply-file-upload`	`accept`	`string`	`'/'`	The accepted file types (e.g. 'image/*', '.pdf'). Defaults to any file.
`ply-file-upload`	`multiple`	`boolean`	`false`	Whether multiple files can be selected at once.
`ply-file-upload`	`disabled`	`boolean`	`false`	Disables the file input and drag-and-drop zones. Also set by Angular Forms via `setDisabledState`.
`ply-file-upload`	`variant`	`FileUploadVariant`	`'input'`	The visual presentation style of the uploader.
`ply-file-upload`	`buttonColor`	`ButtonColor`	`'primary'`	Semantic color variant (only applies when variant is 'button').
`ply-file-upload`	`buttonVariant`	`FileUploadButtonVariant`	`'stroked'`	Solid or stroked styling (only applies when variant is 'button').
`ply-file-upload`	`label`	`string`	`'Choose file'`	Text label displayed on the button or input field. Used as the `aria-label` when variant is 'icon'.
`ply-file-upload`	`(fileSelected)`	`File[]`	—	Emitted when files are selected via dialog or drag-and-drop.
`ply-file-upload`	`(fileRemoved)`	`File`	—	Emitted when a single file is removed from the list.
`ply-file-upload`	`(filesCleared)`	`void`	—	Emitted when all files are cleared from the list.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).