UNPKG

4.37 kBMarkdownView Raw
1[![Build Status](https://travis-ci.org/merlosy/ngx-material-file-input.svg?branch=master)](https://travis-ci.org/merlosy/ngx-material-file-input)
2[![npm](https://img.shields.io/npm/dt/ngx-material-file-input.svg)](https://www.npmjs.com/package/ngx-material-file-input)
3[![](http://img.badgesize.io/https://unpkg.com/ngx-material-file-input@latest/bundles/ngx-material-file-input.umd.min.js?label=full%20size%20as%20min.js&compression=gzip&style=square&color=02adff)](https://www.npmjs.com/package/ngx-material-file-input)
4[![Coverage Status](https://coveralls.io/repos/github/merlosy/ngx-material-file-input/badge.svg)](https://coveralls.io/github/merlosy/ngx-material-file-input)
5[![Known Vulnerabilities](https://snyk.io/test/github/merlosy/ngx-material-file-input/badge.svg)](https://snyk.io/test/github/merlosy/ngx-material-file-input)
6
7# material-file-input
8
9This project provides :
10
11* `ngx-mat-file-input` component, to use inside Angular Material `mat-form-field`
12* a `FileValidator` with `maxContentSize`, to limit the file size
13* a `ByteFormatPipe` to format the file size in a human-readable format
14
15For more code samples, have a look at the [DEMO SITE](https://merlosy.github.io/ngx-material-file-input)
16
17## Install
18
19```
20npm i ngx-material-file-input
21```
22
23## API reference
24
25### MaterialFileInputModule
26
27```ts
28import { MaterialFileInputModule } from 'ngx-material-file-input';
29
30@NgModule({
31 imports: [
32 // the module for this lib
33 MaterialFileInputModule
34 ]
35})
36```
37
38#### NGX_MAT_FILE_INPUT_CONFIG token (optional):
39
40Change the unit of the ByteFormat pipe
41
42```ts
43export const config: FileInputConfig = {
44 sizeUnit: 'Octet'
45};
46
47// add with module injection
48providers: [{ provide: NGX_MAT_FILE_INPUT_CONFIG, useValue: config }];
49```
50
51### FileInputComponent
52
53selector: `<ngx-mat-file-input>`
54
55implements: [MatFormFieldControl](https://material.angular.io/components/form-field/api#MatFormFieldControl)<FileInput> from Angular Material
56
57**Additionnal properties**
58
59| Name | Description |
60| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
61| _@Input()_ valuePlaceholder: `string` | Placeholder for file names, empty by default |
62| _@Input()_ multiple: `boolean` | Allows multiple file inputs, `false` by default |
63| _@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. |
64| _@Input()_ accept: `string` | Any value that `accept` attribute can get. [more about "accept"](https://www.w3schools.com/tags/att_input_accept.asp) |
65| value: `FileInput` | Form control value |
66| empty: `boolean` | Whether the input is empty (no files) or not |
67| clear(): `(event?) => void` | Removes all files from the input |
68
69### ByteFormatPipe
70
71**Example**
72
73```html
74<span>{{ 104857600 | byteFormat }}</span>
75```
76
77_Output:_ 100 MB
78
79### FileValidator
80
81| Name | Description | Error structure |
82| ---------------------------------------------- | ----------------------------------------------- | ----------------------------------------- |
83| maxContentSize(value: `number`): `ValidatorFn` | Limit the total file(s) size to the given value | `{ actualSize: number, maxSize: number }` |
84
85# About me
86
87[@jereyleg](https://twitter.com/jereyleg)
88
89&star; to show support :)
90
91# Roadmap
92
93* drop event to add files
94* _ideas?_
95
96# Kudos to
97
98* https://github.com/dherges/ng-packagr
99* Jason Aden - Packaging Angular Libraries https://www.youtube.com/watch?v=QfvwQEJVOig