Skip to main content
NeuralUIv1.14.3New
GitHub
Component

Uploader

Advanced file uploader with drag and drop, multi-selection, validation and aggregated progress, aligned with NeuralUI forms and dashboard workflows.

TypeScript
import { NeuUploaderComponent } from '@neural-ui/core/uploader';
import type { NeuUploaderError } from '@neural-ui/core/uploader';

Choose files

Drag files here or select them from your device. · Allowed types: image/*,.pdf · Max size: 2.0 MB

Upload in progress68%

Accepts images and PDF documents up to 2 MB.

TypeScript
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NeuUploaderComponent, NeuUploaderError } from '@neural-ui/core/uploader';

@Component({
  imports: [NeuUploaderComponent, ReactiveFormsModule],
  template:     <neu-uploader
  label="Assets"
  hint="PNG, JPG or PDF files up to 2 MB"
  accept="image/*,.pdf"
  [multiple]="true"
  [showProgress]="true"
  [maxFiles]="5"
  [maxFileSize]="2097152"
  [fileStates]="fileStates"
  [formControl]="filesCtrl"
  (filesRejected)="onRejected($event)"
  (fileRetry)="retryUpload($event)"
/>  })
export class MyUploaderComponent {
  readonly filesCtrl = new FormControl<File[] | null>(null);
  readonly fileStates = {
    'contract.pdf': { status: 'uploading', progress: 64 },
    'hero.png': { status: 'error', error: 'Network timeout' },
  };

  onRejected(errors: NeuUploaderError[]): void {
    console.log(errors);
  }

  retryUpload(file: File): void {
    console.log('retry', file.name);
  }
}