FileUpload

New

Bring your files into the workspace. Choose, drop and manage attachments with clear feedback at every step.

Drag & dropValidationProgress & cancellation

A local demo. Uploads on this page are simulated. Your files stay in the browser and are never sent to a server.

Advanced

Add up to five images or PDF documents, each up to 5 MB. Review the queue before uploading.

Drag and drop files here

or use Choose files to browse

Ready for your next idea.

Basic

A compact uploader for a single attachment. Select a PDF up to 2 MB, then upload.

No file selected

Automatic upload

Start the local simulation as soon as an image is selected. Cancel stops the operation.

No file selected

Templates

Customize the toolbar, empty state and file rows. Callbacks keep the same queue and upload behavior.

A place for your project files.

Drop up to three files here to get started.

Disabled

Drag and drop files here

or use Choose files to browse

Usage and API

TypeScript

import { AvFileUpload } from 'avero-ui';

// Add AvFileUpload to your standalone component imports.

HTTP upload

<av-file-upload name="documents[]" url="/api/upload"
  [multiple]="true" accept="image/*,.pdf" [maxFileSize]="5000000"
  [fileLimit]="5" (onUpload)="onUploaded($event)" />

Custom upload

<av-file-upload [customUpload]="true"
  (uploadHandler)="sendFiles($event)" />

// Your handler receives files, signal, progress, complete and error.
// Respect signal for cancellation; call complete(response) or error(message).
// HTTP mode sends multipart FormData. Do not set Content-Type manually.

Inputs. mode (advanced/basic), name, url, multiple, accept, maxFileSize in bytes, fileLimit for pending files, disabled, auto, customUpload, headers, withCredentials, timeout in ms, chooseLabel, uploadLabel and cancelLabel. Single-file mode allows one pending file; remove it before choosing another.

Events and methods. onSelect returns accepted files and currentFiles; onRemove returns the removed File; onClear reports cancellation/clearing. onProgress emits a percentage, onUpload returns files and response, onError returns files and a message. Use choose(), upload(), remove(file), clear(), formatSize(bytes), and read files(), uploadedFiles(), uploading(), progress(). Errors keep the queue available for retry.

Templates. #header and #content receive files as the implicit value, uploadedFiles, uploading, progress, chooseCallback, uploadCallback, clearCallback and removeFileCallback(file). #file receives a File and removeCallback(file). #empty replaces the empty state.

Integration. Supply your own endpoint or uploadHandler. Custom handlers must call complete or error and honor the AbortSignal. Validation in the browser provides feedback; your server must independently validate files and authorize uploads. No backend is included.

Accessibility and styling. Native buttons open the file picker; drag and drop has an equivalent Choose action. Progress and errors are announced. Theme with --av-upload-background, --av-upload-color, --av-upload-border, --av-upload-radius and --av-upload-accent.