CngxFileDrop
projects/forms/input/file-drop.directive.ts
Import#
import { CngxFileDrop } from '@cngx/forms/input'
Description#
Headless drag-and-drop file behavior on any element.
Handles dragenter/dragover/dragleave/drop events, validates
files against accept and maxSize, and provides a browse() method
for programmatic file picker access.
The host element is itself the activation control: click, Enter, or Space
open the file picker, so it always carries role="button". This affordance
is unconditional by design - there is no passive drop-only mode, and you
must not nest interactive controls inside the zone.
<div cngxFileDrop [accept]="['image/*']" [maxSize]="5_000_000"
#drop="cngxFileDrop" (filesChange)="upload($event)">
@if (drop.dragging()) {
<p>Drop files here</p>
} @else {
<p>Drag files here, or click / press Enter to browse</p>
}
</div>Metadata#
Host#
Index#
Outputs
HostBindings
Inputs#
string | undefinedaria-label for the drop zone. Falls back to the global config
(ariaLabels.fileDropZone), then the English default.
number | undefinedMaximum number of accepted files. undefined = no limit. Falls back to global config.
number | undefinedMaximum file size in bytes. undefined = no limit. Falls back to global config.
Bind an upload async state - shows busy/error/progress during upload.
When set, uploading derives from state.isBusy() and uploadProgress
from state.progress(). Drop/browse is disabled while uploading.
Outputs#
Instance Properties#
SignalWhether the element is currently being dragged over.
this.draggingState.asReadonly()Methods#
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-file-drop--dragging] | dragging() |
[class.cngx-file-drop--has-files] | files().length > 0 |
[class.cngx-file-drop--uploading] | uploading() |
[attr.aria-busy] | uploading() || null |
[attr.aria-disabled] | uploading() || null |
[attr.aria-label] | resolvedAriaLabel() |
[attr.tabindex] | tabIndex() |
HostListeners#
| Event | Handler |
|---|---|
(dragenter) | dragenter() |
(dragover) | dragover() |
(dragleave) | dragleave() |
(drop) | drop() |
(click) | click() |
(keydown.enter) | keydown.enter() |
(keydown.space) | keydown.space() |