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>

Schematics

Generate a file-upload component with the NgpFileUpload primitive preconfigured.

 ng g ng-primitives:file-upload

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
data-hover	Applied when the element is hovered.
data-focus-visible	Applied when the element is focus visible.
data-press	Applied when the element is pressed.
data-dragover	Applied when a file is dragged over the element.
data-disabled	Applied when the element is disabled.