Ngx-mat-file-input NPM

mat-file-input

:warning: This project is a fork of the ngx-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 code samples, have a look at the DEMO SITE

Install

npm i ngx-mat-file-input

Or using Yarn

yarn add ngx-mat-file-input

Usage

First, import the MaterialFileInputModule into your feature module (or app.module):

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

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

Now you can use the <ngx-mat-file-input> element:

<mat-form-field appearance="outline">
  <ngx-mat-file-input
    id="my-id"
    valuePlaceholder="doc.placeholder"
    (change)="uploadDocument($event)"
    [multiple]="true"
    [disabled]="false"
  ></ngx-mat-file-input>
  <small
    >Allowed formats: .pdf, .png, .jpg, .jpeg, .docx. <br />
    Max file size. {{ maxFileSize | byteFormat }}</small
  >
</mat-form-field>

API reference

`MaterialFileInputModule`

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

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

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

`FileInputComponent`

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

`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 }`
allowedExtensions(extentions: `string[]`): `ValidatorFn`	Handles allowed file types by controlling whether some specific extensions matches with the uploaded file type	`{ allowedExtentions: allowedExtentions[] }`