MatFileInput

Material component for files

Build status

This project provides:

• 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

Install

npm i mat-file-input --save

API reference

MatFileInputModule

import { MatFileInputModule } from 'mat-file-input';

@NgModule({
  imports: [
    // the module for this lib
    MatFileInputModule
  ]
})

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: MAT_FILE_INPUT_CONFIG, useValue: config }];

FileInputComponent

selector: <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

ByteFormatPipe

Example

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

Output: 100 MB

FileValidator

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