Home Angular Angular Material Design File Input Component Library

Angular Material Design File Input Component Library

Angular webcodeflow · April 13, 2022 · Comments off

Material file input library provides a component to use inside the mat form field of Angular Material, the FileValidator with maxContentSize, to limit file size; and ByteFormatPipe to format the file size in a human-readable format.

material design file upload, style input typefile, custom file input styling, material design form, input typefile design, material design image upload, angular material file upload demo

Convert An HTML File Input Type Into a Fancy File Uploader

How to make use of it:

Install

npm i ngx-material-file-input

1. MaterialFileInputModule

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

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

2. NGX_MAT_FILE_INPUT_CONFIG token (optional):

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

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

Material Design File Input Library, material-file-input Plugin/Github