Uploader

Usage

value contains File objects; selection and dropping do not upload them. accept, maxFiles and maxFileSize validate selection. Handle filesRejected to explain errors. Your application owns the HTTP request and supplies progress or fileStates; fileRetry is a request to retry, not an automatic network operation. previewTemplate receives NeuUploaderFileItem, including file, status and progress. The sample file is generated only after a user action, not during SSR.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

<neu-uploader
  [value]="value()"
  (valueChange)="onValueChange($event)"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  [multiple]="true"
  [dropzone]="true"
  [showProgress]="true"
  [size]="'md'"
  [maxFiles]="3"
  [maxFileSize]="1048576"
  [accept]="'.txt,.pdf'"
  [progress]="progress()"
  [fileStates]="fileStates()"
  [previewTemplate]="failurePreview"
  [chooseLabel]="'Choose files'"
  [clearLabel]="'Clear'"
  [listAriaLabel]="'Selected files'"
  [removeAriaLabel]="'Remove file'"
  [retryLabel]="'Retry'"
  [retryAriaLabel]="'Retry upload for'"
  [acceptedTypesLabel]="'Allowed types'"
  [fileCountSingularLabel]="'file'"
  [fileCountPluralLabel]="'files'"
  (filesRejected)="record('filesRejected', $event)"
  (filesSelected)="record('filesSelected', $event.map(fileName))"
  (fileRetry)="retry($event)"
  [dropzoneLabel]="'Drop files to add them'"
  [duplicateFileMessage]="'File already selected.'"
  [emptySelectionMessage]="'No files selected.'"
  [invalidTypeMessage]="'File type is not allowed.'"
  [label]="'Attachments'"
  [maxFileSizeMessage]="'File exceeds the maximum size.'"
  [maxFileSizeTextLabel]="'Maximum size'"
  [maxFilesMessage]="'Too many files selected.'"
  [placeholder]="'Drop files here or choose them'"
  [progressLabel]="'Upload progress'"
/>
<div class="remaining-actions">
  <button
    neu-button
    variant="outline"
    [disabled]="disabled() || readonly()"
    (neuClick)="sample()"
  >
    {{ t("Add sample file", "Añadir archivo de ejemplo") }}</button
  ><button neu-button variant="ghost" [disabled]="disabled() || readonly() || !value().length" (neuClick)="simulate()">
    {{ t("Toggle sample progress", "Alternar progreso de ejemplo") }}
  </button>
</div>
<ng-template #failurePreview let-item>
  <button neu-button variant="outline" tone="danger" size="sm"
    [ariaLabel]="t('Simulate upload failure for', 'Simular fallo de subida de') + ' ' + item.name"
    [disabled]="disabled() || readonly() || item.status === 'error'"
    (neuClick)="simulateFailure(item)"
  >{{ t('Fail', 'Fallar') }}</button>
</ng-template>

import { signal } from '@angular/core';

export const value = signal([]);

export const progress = signal(null);

export const fileStates = signal({});

export const failurePreview = undefined /* Runtime e instance; use the provider or reference in Source. */;

State and events

value contains File objects; selection and dropping do not upload them. accept, maxFiles and maxFileSize validate selection. Handle filesRejected to explain errors. Your application owns the HTTP request and supplies progress or fileStates; fileRetry is a request to retry, not an automatic network operation. previewTemplate receives NeuUploaderFileItem, including file, status and progress. The sample file is generated only after a user action, not during SSR.

Accessibility and keyboard

Tab reaches the file chooser and remove/retry controls. Enter opens the native picker; file selection is available without dragging.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Models

A model supports [(property)]="signal" or the [property] and (propertyChange) pair. Choose one form, not both.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuUploaderErrorCode } from '@neural-ui/core/uploader';

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

// Public declaration (reference only)
export interface NeuUploaderError {
  code: NeuUploaderErrorCode;
  file?: File;
  message: string;
}

import type { NeuUploaderErrorCode } from '@neural-ui/core/uploader';

// Public declaration (reference only)
export type NeuUploaderErrorCode = 'accept' | 'max-file-size' | 'max-files' | 'duplicate' | 'empty-selection';

import type { NeuUploaderFileStatus } from '@neural-ui/core/uploader';

import type { NeuUploaderFileItem } from '@neural-ui/core/uploader';

// Public declaration (reference only)
export interface NeuUploaderFileItem {
  error?: string;
  file: File;
  id: string;
  name: string;
  progress: number | null;
  size: number;
  status: NeuUploaderFileStatus;
  type: string;
}

import type { NeuUploaderFileStatus } from '@neural-ui/core/uploader';

// Public declaration (reference only)
export type NeuUploaderFileStatus = 'idle' | 'uploading' | 'success' | 'error';

import type { NeuUploaderSize } from '@neural-ui/core/uploader';

// Public declaration (reference only)
export type NeuUploaderSize = 'sm' | 'md' | 'lg';

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Related components

Use related components when your task requires a different interaction or a composed control.

• Password
• Knob
• ColorPicker