Material Design Angular file upload component

by Posted on

Are you looking for file upload component for your angular app if yes then in this post I am going to share a simple & configurable file upload component for use with Angular Material.

ngular file upload component

  1. Install package from npm (npm i mat-file-upload).
  2. Add MatFileUploadModule to your module’s imports, like so:
@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    MatFileUploadModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


  1. 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)'"
  [uploadButtonText]="'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)”
[uploadButtonText] string The text to be displayed for the button that allows the user to upload file(s) “Upload File(s)”
[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

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by bjsawyer. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin