Minimal File Select & Upload Component For Angular Material – mat-file-upload

Description:

A pretty clean and fully configurable file picker & uploader component built with Angular, Angular Material, and Material Icons.

How to use it:

1. Install & download.

# NPM
$ npm install mat-file-upload --save

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

2. Add the component to your template.

<mat-file-upload
  OPTIONS HERE
  >
</mat-file-upload>

3. Available options with default values.

• labelText: label text
• selectButtonText: text of select button
• uploadButtonText: text of upload button
• allowMultipleFiles: allows multi-file upload
• showUploadButton: whether or not to show the upload button
• customSvgIcon: custom SVG icon
• acceptedTypes: allowed extensions
• uploadClicked: on click
• selectedFilesChanged: onchanged

<mat-file-upload
  [labelText]="'Select file(s)'"
  [selectButtonText]="'Select file(s)'"
  [uploadButtonText]="'Upload File(s)'"
  [allowMultipleFiles]="false"
  [showUploadButton]="true"
  [customSvgIcon]="null"
  [acceptedTypes]="'*.*'"
  (uploadClicked)="onUploadClicked($event)"
  (selectedFilesChanged)="onSelectedFilesChanged($event)"
  >
</mat-file-upload>