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)"
  (ngpFileUploadCanceled)="onCancel()"
></button>

Reusable Component

Create a file upload component that uses the NgpFileUpload directive.

Schematics

Generate a reusable file upload component using the Angular CLI.

ng g ng-primitives:primitive file-upload

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• styles: How component styles should be generated. css (default) includes the full example styles; unstyled omits them entirely so you can style the component yourself.
• example-styles (deprecated): still supported for compatibility - true maps to styles: css, false maps to styles: unstyled.

Examples

File Dropzone

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.

API Reference

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

NgpFileUpload

NgpFileDropzone

Global Configuration

You can configure the default options for all file uploads and file dropzones in your application by using the provideFileUploadConfig and provideFileDropzoneConfig functions in a providers array.

import { provideFileDropzoneConfig, provideFileUploadConfig } from 'ng-primitives/file-upload';

bootstrapApplication(AppComponent, {
  providers: [
    provideFileUploadConfig({
      fileTypes: ['image/png', '.jpg'],
      multiple: true,
      dragAndDrop: false,
    }),
    provideFileDropzoneConfig({
      fileTypes: ['image/png', '.jpg'],
      multiple: true,
    }),
  ],
});

Any input set on a primitive takes precedence over the configured default.

NgpFileUploadConfig

NgpFileDropzoneConfig

Accessibility

The file upload primitive should be applied to a <button> element or another interactive element for keyboard accessibility. The file dropzone is a drag-and-drop target and is not keyboard accessible by default — ensure an alternative method (such as the file upload trigger) is always available.

Keyboard Interactions

• Enter / Space: Open the file selection dialog (when applied to a button).