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

Author: bjsawyer
Publish Date:
Official Page: Go to website
Views Total: 40
License: MIT

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>

Add Comment