File Upload Demo

Basic Usage

Drag & drop files here or click to browse

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

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

File Type Filtering

Drop images here or click to browse

Accepted: image/* · Max 5 files 

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

Sortable & Editable

Drop files, then reorder and rename

Accepted: */* · Max 10 files 

<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 

<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 

<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 

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