Primitives
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.
Select or drag and drop files here. Max file size: 10MBimport { Component } from "@angular/core";
import { NgIcon, provideIcons } from "@ng-icons/core";
import { heroCloudArrowUp } from "@ng-icons/heroicons/outline";
import { NgpFileUpload } from "ng-primitives/file-upload";
@Component({
selector: "app-file-upload",
imports: [NgpFileUpload, NgIcon],
providers: [provideIcons({ heroCloudArrowUp })],
template: `
<div
(ngpFileUploadSelected)="onFilesSelected($event)"
(ngpFileUploadRejected)="onFilesRejected()"
ngpFileUploadFileTypes=".svg, .pdf"
ngpFileUpload
ngpFileUploadMultiple
>
<ng-icon name="heroCloudArrowUp" aria-hidden="true" />
<p class="heading">Select or drag and drop files here.</p>
<p class="subheading">Max file size: 10MB</p>
</div>
`,
styles: `
[ngpFileUpload] {
display: flex;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 0.25rem;
border-radius: 0.5rem;
border: 1px dashed var(--ngp-border-secondary);
background-color: var(--ngp-background);
padding: 2rem 3rem;
}
[ngpFileUpload][data-dragover] {
border-color: var(--ngp-border);
background-color: var(--ngp-background-hover);
}
ng-icon {
color: var(--ngp-text-primary);
font-size: 20px;
margin-bottom: 0.25rem;
}
.heading {
font-size: 0.875rem;
font-weight: 500;
color: var(--ngp-text-primary);
line-height: 1.25rem;
text-align: center;
margin: 0;
}
.subheading {
font-size: 0.75rem;
color: var(--ngp-text-secondary);
line-height: 1rem;
text-align: center;
margin: 0;
}
`,
})
export default class FileUploadExample {
onFilesSelected(files: FileList | null): void {
if (files) {
alert(`Selected ${files.length} files.`);
}
}
onFilesRejected(): void {
alert("File type not supported.");
}
}
Import the FileUpload primitives from ng-primitives/file-upload
.
import { NgpFileUpload } from 'ng-primitives/file-upload';
Assemble the file-upload directives in your template.
<button
ngpFileUpload
(ngpFileUploadSelected)="onFilesSelected($event)"
(ngpFileUploadCanceled)="onCancel()"
></button>
The file dropzone primitive allows you to create a dropzone for files. This functionality is built into the file upload primitive, but can also be used separately if you don't want to show the file upload dialog on click.
But clicking won't open a file selection dialog.Drag and drop files anywhere here!
import { Component } from "@angular/core";
import { NgpFileDropzone } from "ng-primitives/file-upload";
@Component({
selector: "app-file-dropzone",
imports: [NgpFileDropzone],
template: `
<div
(ngpFileDropzoneSelected)="onFilesSelected($event)"
(ngpFileDropzoneRejected)="onFilesRejected()"
ngpFileDropzoneFileTypes=".svg, .pdf"
ngpFileDropzone
>
<h3>Drag and drop files anywhere here!</h3>
<p>But clicking won't open a file selection dialog.</p>
</div>
`,
styles: `
[ngpFileDropzone] {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 3rem;
flex-direction: column;
row-gap: 0.25rem;
width: 100%;
height: 100%;
border-radius: 0.5rem;
border: 1px dashed var(--ngp-border-secondary);
background-color: var(--ngp-background);
padding: 2rem 3rem;
}
[ngpFileDropzone][data-dragover] {
border-color: var(--ngp-border);
background-color: var(--ngp-background-hover);
}
h3 {
font-size: 0.875rem;
font-weight: 500;
color: var(--ngp-text-primary);
line-height: 1.25rem;
text-align: center;
margin: 0;
}
p {
font-size: 0.75rem;
color: var(--ngp-text-secondary);
line-height: 1rem;
text-align: center;
margin: 0;
}
`,
})
export default class FileDropzoneExample {
onFilesSelected(files: FileList | null): void {
if (files) {
alert(`Selected ${files.length} files.`);
}
}
onFilesRejected(): void {
alert("File type not supported.");
}
}
Create a file upload component that uses the NgpFileUpload
directive.
import { Component } from '@angular/core';
import { FileUpload } from './file-upload';
@Component({
selector: 'app-root',
imports: [FileUpload],
template: `
<app-file-upload (selected)="onFilesSelected($event)" />
`,
})
export default class App {
onFilesSelected(files: FileList | null): void {
if (files) {
alert(`Selected ${files.length} files.`);
}
}
}
Generate a reusable file upload component using the Angular CLI.
ng g ng-primitives:primitive file-upload
path
: The path at which to create the component file.prefix
: The prefix to apply to the generated component selector.componentSuffix
: The suffix to apply to the generated component class name.fileSuffix
: The suffix to apply to the generated component file name. Defaults to component
.exampleStyles
: Whether to include example styles in the generated component file. Defaults to true
.The following directives are available to import from the ng-primitives/file-upload
package:
A directive that allows you to turn any element into a file upload trigger. The accepted file types. This can be an array of strings or a comma-separated string.
Accepted types can either be file extensions (e.g. `.jpg`) or MIME types (e.g. `image/jpeg`).
Whether to allow multiple files to be selected.
Whether to allow the user to select directories.
Whether drag-and-drop is enabled.
Whether the file upload is disabled.
Emits when the user selects files.
Emits when the user cancel the file selection.
Emits when uploaded files are rejected because they do not match the allowed {@link fileTypes}.
Emits when the user drags a file over the file upload.
[ngpFileUpload]
ngpFileUpload
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. |
Capture files dropped on the element. The accepted file types. This can be an array of strings or a comma-separated string.
Accepted types can either be file extensions (e.g. `.jpg`) or MIME types (e.g. `image/jpeg`).
Whether to allow multiple files to be selected.
Whether to allow the user to select directories.
Whether the file upload is disabled.
Emits when the user selects files.
Emits when uploaded files are rejected because they do not match the allowed {@link fileTypes}.
Emits when the user drags a file over the file upload.
[ngpFileDropzone]
ngpFileDropzone
Attribute | Description |
---|---|
data-hover |
Applied when the element is hovered. |
data-dragover |
Applied when a file is dragged over the element. |
data-disabled |
Applied when the element is disabled. |
Copyright © 2025 Angular Primitives