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 |
|
9 | This 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 |
|
15 | For more code samples, have a look at the [DEMO SITE](https://merlosy.github.io/ngx-material-file-input)
|
16 |
|
17 | ## Install
|
18 |
|
19 | ```
|
20 | npm i ngx-material-file-input
|
21 | ```
|
22 |
|
23 | ## API reference
|
24 |
|
25 | ### MaterialFileInputModule
|
26 |
|
27 | ```ts
|
28 | import { 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 |
|
40 | Change the unit of the ByteFormat pipe
|
41 |
|
42 | ```ts
|
43 | export const config: FileInputConfig = {
|
44 | sizeUnit: 'Octet'
|
45 | };
|
46 |
|
47 | // add with module injection
|
48 | providers: [{ provide: NGX_MAT_FILE_INPUT_CONFIG, useValue: config }];
|
49 | ```
|
50 |
|
51 | ### FileInputComponent
|
52 |
|
53 | selector: `<ngx-mat-file-input>`
|
54 |
|
55 | implements: [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 | ☆ 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
|