material-file-input

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, have a look at the DEMO SITE

Install

File input for Angular Material form-field

npm i ngx-material-file-input

API reference

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

optional NGX_MAT_FILE_INPUT_CONFIG token:

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 }];

NgxMatFormField

selector: <ngx-mat-file-input>

implements: MatFormFieldControl from Angular Material

Additionnal properties

Name	Description
@Input() valuePlaceholder: string	Placeholder for file names
@Input() multiple: boolean	Allows multiple file inputs
value: FileInput	form control value

Standard use:

<mat-form-field>
  <ngx-mat-file-input formControlName="basicfile" placeholder="Basic Input" ></ngx-mat-file-input>
</mat-form-field>

Fully-featured component :

<mat-form-field>
  <ngx-mat-file-input formControlName="requiredfile" placeholder="Required input" valuePlaceholder="No file selected" required multiple></ngx-mat-file-input>
  <mat-icon matSuffix>folder</mat-icon>
  <mat-error *ngIf="formDoc.get('requiredfile').hasError('required')">
    Please select a file
  </mat-error>
  <mat-error *ngIf="formDoc.get('requiredfile').hasError('maxContentSize')">
    The total size must not exceed {{ formDoc.get('requiredfile')?.getError('maxContentSize').maxSize | byteFormat }}
    ({{ formDoc.get('requiredfile')?.getError('maxContentSize').actualSize | byteFormat }})
  </mat-error>
</mat-form-field>

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 }

About me

@jereyleg

☆ to show support :)

Roadmap

• support "accept" type of file
• drop event to add files
• ideas?

Kudos to

• https://github.com/dherges/ng-packagr
• Jason Aden - Packaging Angular Libraries https://www.youtube.com/watch?v=QfvwQEJVOig