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-material-file-input
`

API reference

$3

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

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

#### NGX_MAT_FILE_INPUT_CONFIG token (optional):

Change the unit of the ByteFormat pipe

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

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

$3

selector:

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 |

$3

Example

`html
{{ 104857600 | byteFormat }}
`

_Output:_ 100 MB

$3

| 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

* 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