File Upload Demo

Drag & Drop Upload mit Validierung, Progress-Tracking und Form-Integration.

Basic Usage

Configure multiple files, max size, and auto-upload behavior.

Drag & drop files here or click to browse

Accepted: */* · Max 10 files · Max 5 MB each

Code
<rui-file-upload
  [multiple]="true"
  [maxSize]="maxFileSize"
  [uploadHandler]="uploadHandler"
/>

File Type Filtering

Restrict accepted file types using the accept attribute.

Drop images here or click to browse

Accepted: image/* · Max 5 files

Code
<rui-file-upload
  accept="image/*"
  [maxFiles]="5"
  dropzoneText="Drop images here or click to browse"
  uploadButtonText="Upload Images"
  [uploadHandler]="handler"
/>

Sortable & Editable

Enable drag-to-reorder and inline rename on double-click.

Drop files, then reorder and rename

Accepted: */* · Max 10 files

Code
<rui-file-upload
  [sortable]="true"
  [editable]="true"
  [uploadHandler]="handler"
/>

Template-driven Form

Using ngModel with the file upload. The model value is the array of RuiFileItem.

Drag & drop files here or click to browse

Accepted: */* · Max 10 files

Code
<rui-file-upload
  ngModel
  name="fileUploadModel"
  [uploadHandler]="handler"
/>

Reactive Forms Integration

Drag & drop files here or click to browse

Accepted: */* · Max 10 files

Files in control: 0

Code
<rui-file-upload
  [formControl]="fileControl"
  [uploadHandler]="uploadHandler"
/>

Signal Form

Using model() signal directly — no FormsModule or ReactiveFormsModule needed.

Drag & drop files here or click to browse

Accepted: */* · Max 10 files

Code
<rui-file-upload
  [(files)]="myFiles"
  [uploadHandler]="handler"
/>