Package Exports

mat-file-upload

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mat-file-upload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Material File Upload

This tool is a simple & configurable file upload component for use with Angular Material.

Live Demo: https://bjsawyer.github.io/mat-file-upload/

Prerequisites

In order to use mat-file-upload in your app, you must have the following dependencies installed:

Usage

Install package from npm (npm i mat-file-upload).
Add MatFileUploadModule to your module's imports, like so:

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    MatFileUploadModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Add the element to your template, like so:

Basic:

<mat-file-upload></mat-file-upload>

Advanced:

<mat-file-upload
  [labelText]="'Select a file (or multiple) to upload:'"
  [selectButtonText]="'Choose File(s)'"
  [selectFilesButtonType]="button"
  [uploadButtonText]="'Submit'"
  [uploadButtonType]="submit"
  [allowMultipleFiles]="true"
  [showUploadButton]="true"
  [customSvgIcon]="'close_custom'"
  [acceptedTypes]="'.png, .jpg, .jpeg'"
  (uploadClicked)="onUploadClicked($event)"
  (selectedFilesChanged)="onSelectedFilesChanged($event)"
>
</mat-file-upload>

Options

`@Input()` Properties

Directive	Type	Description	Default Value
`[labelText]`	`string`	The text to be displayed for the file upload label	"Select file(s)"
`[selectButtonText]`	`string`	The text to be displayed for the button that allows the user to select file(s)	"Select file(s)"
`[selectFilesButtonType]`	`string`	The HTML "type" attribute of the "Select Files" button	"button"
`[uploadButtonText]`	`string`	The text to be displayed for the button that allows the user to upload file(s)	"Upload File(s)"
`[uploadButtonType]`	`string`	The HTML "type" attribute of the "Upload" button	"button"
`[allowMultipleFiles]`	`boolean`	True/false representing whether the user can select multiple files at a time	false
`[showUploadButton]`	`boolean`	True/false representing whether the "Upload" button is shown in the DOM	true
`[customSvgIcon]`	`string`	The name of the custom svgIcon to be used as the "close" button; otherwise defaults to Material's "close" icon	null
`[acceptedTypes]`	`string`	The list of file types that are allowed to be uploaded	"."

`@Output()` Properties

Directive	Type	Description
`(uploadClicked)`	`EventEmitter<FileList>`	Event handler that emits the list of selected files whenever the "Upload" button is clicked
`(selectedFilesChanged)`	`EventEmitter<FileList>`	Event handler that emits the list of selected files whenever the user changes file selection

mat-file-upload