ngx-om-material-file-input
Version:
File input management for Angular Material
101 lines (68 loc) • 4.61 kB
Markdown
[](https://badge.fury.io/js/ngx-material-file-input)
[](https://app.travis-ci.com/merlosy/ngx-material-file-input)
[](https://www.npmjs.com/package/ngx-material-file-input)
[](https://www.npmjs.com/package/ngx-material-file-input)
[](https://coveralls.io/github/merlosy/ngx-material-file-input)
[](https://snyk.io/test/github/merlosy/ngx-material-file-input)
# 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](https://github.com/omishyn/ngx-om-material-file-input)
## Install
```
npm i ngx-om-material-file-input
```
## API reference
### MaterialFileInputModule
```ts
import { MaterialFileInputModule } from 'ngx-om-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 }];
```
### FileInputComponent
selector: `<ngx-mat-file-input>`
implements: [MatFormFieldControl](https://material.angular.io/components/form-field/api#MatFormFieldControl)<FileInput> 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"](https://www.w3schools.com/tags/att_input_accept.asp) |
| 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**
```html
<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](https://twitter.com/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