Awesome Open Source
Awesome Open Source

Build Status npm Coverage Status Known Vulnerabilities


This project provides :

  • ngx-mat-file-input component, to use inside Angular Material mat-form-field
  • a FileValidator with maxContentSize, to limit the file size
  • a ByteFormatPipe to format the file size in a human-readable format

For more code samples, have a look at the DEMO SITE


npm i ngx-material-file-input

API reference


import { MaterialFileInputModule } from 'ngx-material-file-input';

  imports: [
    // the module for this lib

NGX_MAT_FILE_INPUT_CONFIG token (optional):

Change the unit of the ByteFormat pipe

export const config: FileInputConfig = {
  sizeUnit: 'Octet'

// add with module injection
providers: [{ provide: NGX_MAT_FILE_INPUT_CONFIG, useValue: config }];


selector: <ngx-mat-file-input>

implements: MatFormFieldControl from Angular Material

Additionnal properties

Name Description
@Input() valuePlaceholder: string Placeholder for file names, empty by default
@Input() multiple: boolean Allows multiple file inputs, false by default
@Input() autofilled: boolean Whether the input is currently in an autofilled state. If property is not present on the control it is assumed to be false.
@Input() accept: string Any value that accept attribute can get. more about "accept"
value: FileInput Form control value
empty: boolean Whether the input is empty (no files) or not
clear(): (event?) => void Removes all files from the input



<span>{{ 104857600 | byteFormat }}</span>

Output: 100 MB


Name Description Error structure
maxContentSize(value: number): ValidatorFn Limit the total file(s) size to the given value { actualSize: number, maxSize: number }

About me


☆ to show support :)


  • drop event to add files
  • ideas?

Kudos to

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (252,241
Angular (12,637
File (2,164
Material (1,584
Upload (880
Input (765
Related Projects