A simple & configurable Angular Material file upload component.
npm install mat-file-uploadThis tool is a simple & configurable file upload component for use with Angular Material.
Live Demo: https://bjsawyer.github.io/mat-file-upload/

In order to use mat-file-upload in your app, you must have the following dependencies installed:
- Angular
- Angular Material
- Material Icons
1. Install package from npm (npm i mat-file-upload).
2. Add MatFileUploadModule to your module's imports, like so:
``typescript`
@NgModule({
declarations: [AppComponent],
imports: [
...
MatFileUploadModule,
...
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
3. Add the element to your template, like so:
Basic:
`html`
Advanced:
`html`
[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)"
>
| 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 | "\.\" |
| Directive | Type | Description |
| ------------------------ | ------------------------ | -------------------------------------------------------------------------------------------- |
| (uploadClicked) | EventEmitter | Event handler that emits the list of selected files whenever the "Upload" button is clicked |(selectedFilesChanged)
| | EventEmitter