File Upload

The file upload primitive allows you to trigger a file upload from any element, giving you the more control over the appearance and behavior compared to the native file input.

Import

Import the FileUpload primitives from ng-primitives/file-upload.

import { NgpFileUpload } from 'ng-primitives/file-upload';

Usage

Assemble the file-upload directives in your template.

<button ngpFileUpload (ngpFileUploadSelected)="onFilesSelected($event)"></button>

API Reference

The following directives are available to import from the ng-primitives/file-upload package:

NgpFileUpload

A directive that allows you to turn any element into a file upload trigger.

• Selector: [ngpFileUpload]
• Exported As: ngpFileUpload
• Host Directives: NgpHover, NgpFocusVisible, NgpPress

Define if multiple files can be selected. Define the file types that can be selected. Define if directories can be selected. Define if drag and drop is enabled. Define if the file upload is disabled. Event emitted when files are selected. Event emitted when a file is dragged over or out of the element.

Data Attributes

Attribute	Description	Value
data-hover	If the file upload is being hovered over.	true | false
data-focus-visible	If the file upload is focused.	true | false
data-press	If the file upload is being pressed.	true | false
data-dragover	If a file is being dragged over the element.	true | false
data-disabled	If the file upload is disabled.	true | false