File upload
Drag-and-drop file target with validation via XFileService.
@xngui/cdk/file-upload@xngui/cdk/file-uploadPreview
Drag-and-drop file zone
Attach xFileUploadZone to any surface — files are extracted and validated through XFileService. Host data-state becomes active while a file drag is over the zone.
Drop files here
Or use the controls to change accept, size limits, and disabled state
import { XFileUploadZone } from '@xngui/cdk/file-upload';
<div
xFileUploadZone
[xFileUploadZoneAccept]="'image/*'"
[xFileUploadZoneMultiple]="true"
[xFileUploadZoneMaxFileSize]="524288"
(xFileUploadZone)="onFiles($event)"
(xFileUploadZoneValidated)="onValidated($event)"
(xFileUploadZoneDragActive)="dragActive.set($event)"
>
Drop files here
<div>
Events
Interact with the preview — events will appear here.