FileUpload
Native file selection, drag and drop, immutable file arrays, deterministic validation events and one model for every Angular Forms API.
GET STARTED
Import
Import the canonical standalone control from its granular entry point.
Multiple files and Signal Forms
The model is always readonly File[]. Multiple mode appends accepted files without mutating the supplied array.
No files selected
Single-file mode
Without multiple, the next accepted selection replaces the previous file while preserving the array-shaped model.
No files selected
Angular Forms
Signal Forms, Reactive Forms and template-driven forms bind the same immutable file-array contract.
Client-side constraints
accept, size, count and duplicate checks produce deterministic rejection reasons. They improve UX but never replace server validation.
No files selected
Control states
Readonly keeps the visible value inspectable while blocking mutation; disabled follows Forms ownership. Invalid, required and pending stay independent.
No files selected
No files selected
No files selected
No files selected
Labels, icons and compact list ownership
Every visible string can override the active locale and Neural Icons can be assigned without custom projected markup.
No release assets
Application-owned HTTP upload
FileUpload has no URL, headers, authentication, progress, retry or chunking API. Build FormData and choose the transport in application code.
Unstyled and typed slots
Native chooser behavior, drag and drop, announcements and immutable state remain while consumer classes own every visual slot.
No files selected
ACCESSIBILITY
FileUpload accessibility
A real hidden file input and real visible buttons preserve browser semantics while the dropzone remains a drag target rather than a fake control.
Native semantics
The native input retains accept, multiple, capture, name and FileList selection. The choose button targets it through aria-controls.
Names and status
Use Field composition, ariaLabel or ariaLabelledBy. Selection summaries and localized rejection messages are announced through a polite status region.
Keyboard behavior
Choose, remove and clear are native buttons, preserving Tab, Enter and Space. Focus returns to normal document order; drag-and-drop is never the only input path.
Security boundary
Browser MIME metadata and client limits are untrusted hints. Validate filename, size, content and authorization again on the server; never execute or preview untrusted files without a separate safe policy.
PUBLIC CONTRACT
FileUpload API
The complete beta contract for selection, validation, state and visual ownership.
Inputs
| Input | Type | Default | Purpose |
|---|---|---|---|
| value | readonly File[] | [] | Immutable selected-file model. |
| accept | string | '' | Native and client-side MIME/extension filter. |
| multiple | boolean | false | Append multiple accepted files. |
| maxFileSize | number | undefined | undefined | Maximum bytes per file. |
| maxFiles | number | undefined | undefined | Maximum selected count. |
| allowDuplicates | boolean | false | Allows identical file identities. |
| disabled | boolean | false | Blocks every interaction. |
| readonly | boolean | false | Shows selection but blocks mutations. |
| required | boolean | false | Exposes required state and ARIA. |
| invalid | boolean | false | Exposes invalid presentation and ARIA. |
| pending | boolean | false | Exposes busy state. |
| touched | boolean | false | External form-state hook. |
| dirty | boolean | false | External form-state hook. |
| fluid | boolean | false | Fills available inline width. |
| showFileList | boolean | true | Shows selected file rows. |
| name | string | '' | Native file input name. |
| capture | string | '' | Native capture hint. |
| uploadId | string | '' | Explicit control ID outside Field. |
| ariaLabel | string | '' | Accessible name. |
| ariaLabelledBy | string | '' | Visible-label relationship. |
| chooseFileLabel | string | '' | Single chooser override. |
| chooseFilesLabel | string | '' | Multiple chooser override. |
| dropFileLabel | string | '' | Single drop text override. |
| dropFilesLabel | string | '' | Multiple drop text override. |
| removeButtonLabel | string | '' | Visible remove text override. |
| clearFilesLabel | string | '' | Clear action override. |
| emptyFilesLabel | string | '' | Empty state override. |
| chooseIconClass | string | '' | Chooser Neural Icon class. |
| removeIconClass | string | '' | Remove Neural Icon class. |
| clearIconClass | string | '' | Clear Neural Icon class. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
| fileUploadClass | string | '' | Consumer root class. |
| inputClass | string | '' | Consumer native input class. |
| dropzoneClassName | string | '' | Consumer dropzone class. |
| fileListClassName | string | '' | Consumer list class. |
| classes | NeuralFileUploadClasses | {} | Typed visual slots. |
Events
| Event | Payload | Meaning |
|---|---|---|
| valueChange | readonly File[] | Generated model output. |
| selectionChange | NeuralFileSelectionChange | Accepted/rejected user selection. |
| filesRejected | NeuralFilesRejectedEvent | Focused rejection event. |
| fileRemoved | NeuralFileRemoveEvent | User removed one file. |
| cleared | NeuralFileClearEvent | User cleared the selection. |
| touch | void | Blur or completed user selection. |
Methods
openFileDialog()Opens the native file chooser.
focus(options?)Focuses the visible choose button.
clear()Clears programmatically without user-action events.
reset()Clears value and transient drag state.
formatFileSize(bytes)Formats bytes through the active locale.
Typed class slots
rootinputdropzonedropzoneIcondropzoneTextchooseButtoncontentfileListfileItemfileInfofileNamefileMetaremoveButtonremoveIconclearButtonclearIconemptymessageValue and event contract
Every mode uses readonly File[]. Programmatic clear() and reset() do not impersonate user actions. User selection emits one detailed event even when all candidates are rejected.
DESIGN SYSTEM
FileUpload tokens
Dropzone, list, actions, focus, states and motion inherit the active primary, surface and color mode.
Design tokens
--neural-file-upload-widthComponent inline size.
--neural-file-upload-gapSpacing between component items.
--neural-file-upload-colorComponent foreground color.
--neural-file-upload-color-readonlyReadonly component foreground color.
--neural-file-upload-font-familyComponent font family.
--neural-file-upload-font-sizeComponent font size.
--neural-file-upload-line-heightComponent line height.
--neural-file-upload-dropzone-min-heightDropzone minimum block size.
--neural-file-upload-dropzone-paddingDropzone internal spacing.
--neural-file-upload-dropzone-colorDropzone foreground color.
--neural-file-upload-dropzone-color-activeActive dropzone foreground color.
--neural-file-upload-dropzone-backgroundDropzone background surface.
--neural-file-upload-dropzone-background-activeActive dropzone background surface.
--neural-file-upload-dropzone-borderDropzone border shorthand.
--neural-file-upload-dropzone-border-color-activeActive dropzone border color.
--neural-file-upload-dropzone-border-color-invalidInvalid dropzone border color.
--neural-file-upload-radiusComponent corner radius.
--neural-file-upload-shadowComponent box shadow.
--neural-file-upload-shadow-activeActive component box shadow.
--neural-file-upload-shadow-invalidInvalid component box shadow.
--neural-file-upload-icon-gapSpacing between icon items.
--neural-file-upload-icon-colorIcon foreground color.
--neural-file-upload-icon-sizeIcon width and height.
--neural-file-upload-text-gapSpacing between text items.
--neural-file-upload-text-colorText foreground color.
--neural-file-upload-button-min-heightButton minimum block size.
--neural-file-upload-button-paddingButton internal spacing.
--neural-file-upload-button-colorButton foreground color.
--neural-file-upload-button-backgroundButton background surface.
--neural-file-upload-button-borderButton border shorthand.
--neural-file-upload-button-color-hoverHovered button foreground color.
--neural-file-upload-button-background-hoverHovered button background surface.
--neural-file-upload-button-border-color-hoverHovered button border color.
--neural-file-upload-button-radiusButton corner radius.
--neural-file-upload-content-gapSpacing between content items.
--neural-file-upload-file-gapSpacing between file items.
--neural-file-upload-file-item-gapSpacing between file item items.
--neural-file-upload-file-item-paddingFile item internal spacing.
--neural-file-upload-file-item-backgroundFile item background surface.
--neural-file-upload-file-item-borderFile item border shorthand.
--neural-file-upload-file-item-radiusFile item corner radius.
--neural-file-upload-file-info-gapSpacing between file info severity items.
--neural-file-upload-file-name-colorFile name foreground color.
--neural-file-upload-file-name-weightFont weight of each uploaded file name.
--neural-file-upload-file-meta-colorFile meta foreground color.
--neural-file-upload-file-meta-font-sizeFile meta font size.
--neural-file-upload-action-gapSpacing between action items.
--neural-file-upload-action-min-heightAction minimum block size.
--neural-file-upload-action-paddingAction internal spacing.
--neural-file-upload-action-colorAction foreground color.
--neural-file-upload-action-backgroundAction background surface.
--neural-file-upload-action-borderAction border shorthand.
--neural-file-upload-action-color-hoverHovered action foreground color.
--neural-file-upload-action-background-hoverHovered action background surface.
--neural-file-upload-action-radiusAction corner radius.
--neural-file-upload-message-colorMessage foreground color.
--neural-file-upload-message-font-sizeMessage font size.
--neural-file-upload-focus-ringComponent keyboard focus ring.
--neural-file-upload-focus-ring-offsetComponent focus ring offset.
--neural-file-upload-disabled-opacityDisabled opacity.
--neural-file-upload-transitionComponent CSS transition.