@styloviz/file-upload

Drag-and-drop and button-style file uploaders with type/size constraints and progress.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/icons @styloviz/core @styloviz/file-upload

Requires @angular/core and @angular/common >= 21. Also needs @styloviz/icons, @styloviz/core — listed above so no extra step is required on npm (on pnpm/yarn, list them yourself). Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvFileUploadComponent } from '@styloviz/file-upload';

@Component({
  standalone: true,
  imports: [SvFileUploadComponent],
  template: `
    <sv-file-upload
      [accept]="'image/*'"
      (filesChange)="onFiles($event)" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | variant | FileUploadVariant | 'button' | Trigger style: button or drag-and-drop dropzone. | | size | FileUploadSize | 'md' | Control size: sm, md or lg. | | accept | string | '' | Accepted file types (e.g. "image/*,.pdf"). | | multiple | boolean | true | Allow selecting multiple files. | | maxFiles | number | 10 | Maximum number of files. | | maxSizeMb | number | 10 | Per-file size limit in MB. | | disabled | boolean | false | Disable the uploader. | | uploader | SvUploader \| null | null | The function that actually sends a file. Without one the component only collects files — it has no way to store them, and autoUpload does nothing. | | autoUpload | boolean | true | Start uploading as soon as files are added. Set false to collect first and call uploadAll() from a submit button. | | concurrency | number | 3 | Maximum uploads in flight at once. The rest queue. Firing ten parallel uploads saturates the connection and makes every one of them slower. Clamped to at least 1. | | demoMode | boolean | false | Fake the upload with a progress animation and an occasional random failure. For demos and screenshots only — never in a real app. Replaces the former autoSimulate input, and is ignored whenever an uploader is supplied. | | label | string | 'Upload files' | Trigger/label text. | | hint | string | '' | Helper text shown under the trigger. | | customClass | string | '' | Extra CSS classes for the root. | | errorMessage | string | '' | Client-side validation message. | | serverError | SvServerError | null | A rejection reported by the server about this value. Self-expiring. |

Outputs

| Output | Type | Description | | --- | --- | --- | | filesChange | UploadFile[] | Emitted with the full file list whenever it changes. | | fileAdded | UploadFile | Emitted when a single file is added. | | fileRemoved | string | Emitted with the id of a removed file. | | uploadComplete | UploadFile[] | Emitted when all uploads finish successfully. | | uploadError | UploadFile | Emitted when a file fails validation or upload. | | uploadCancelled | UploadFile | A file's upload was cancelled by the user. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/file-upload

License

MIT