Saltar al contenido principal
NeuralUIv1.14.3Nuevo
GitHub
Componente

Uploader

Uploader avanzado con drag and drop, selección múltiple, validación y progreso agregado, alineado con los formularios y flujos dashboard de NeuralUI.

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

Seleccionar archivos

Arrastra archivos aquí o selecciónalos desde tu equipo. · Tipos permitidos: image/*,.pdf · Tamaño máximo: 2.0 MB

Subida en progreso68%

Acepta imágenes y documentos PDF de hasta 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);
  }
}