# material-file-input > [![Build Status](https://travis-ci.org/merlosy/dgallagher-ngx-material-file-input.svg?branch=master)](https://travis-ci.org/merlosy/dgallagher-ngx-material-file-input) [![npm](https://img.shields.io/npm/dt/dgallagher-ngx-material-file-input.svg)](https:// Latest version **1.0.0** (published 2020-02-08) · MIT license · 0 weekly downloads ## Install ```sh npm install material-file-input pnpm add material-file-input yarn add material-file-input bun add material-file-input ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2020-02-08 | | First published | 2020-02-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 19 | | Unpacked size | 90.2 KB | | Known vulnerabilities | 0 (+21 in 3 direct dependencies) | | Install scripts | no | | Maintainers | damogallagher | ## Links - npm: https://www.npmjs.com/package/material-file-input - npm.io page: https://npm.io/package/material-file-input ## Dependencies (19) - [viz](https://npm.io/package/viz.md) ^0.0.1 - [rxjs](https://npm.io/package/rxjs.md) ^6.5.2 - [core-js](https://npm.io/package/core-js.md) ^3.2.1 - [zone.js](https://npm.io/package/zone.js.md) ~0.9.1 - [@ngrx/store](https://npm.io/package/@ngrx/store.md) ^8.2.0 - [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^8.1.2 - [@angular/core](https://npm.io/package/@angular/core.md) ^8.2.1 - [@ngrx/effects](https://npm.io/package/@ngrx/effects.md) ^8.2.0 - [@nrwl/angular](https://npm.io/package/@nrwl/angular.md) 8.3.0 - [@angular/forms](https://npm.io/package/@angular/forms.md) ^8.2.1 - [@angular/common](https://npm.io/package/@angular/common.md) ^8.2.1 - [@angular/router](https://npm.io/package/@angular/router.md) ^8.2.1 - [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^8.2.1 - [@angular/material](https://npm.io/package/@angular/material.md) ^8.1.2 - [@ngrx/router-store](https://npm.io/package/@ngrx/router-store.md) ^8.2.0 - [@angular/animations](https://npm.io/package/@angular/animations.md) ^8.2.1 - [@ngrx/store-devtools](https://npm.io/package/@ngrx/store-devtools.md) ^8.2.0 - [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^8.2.1 - [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^8.2.1 ## Recent versions - 1.0.0 (latest) — 2020-02-08 ## README [![Build Status](https://travis-ci.org/merlosy/dgallagher-ngx-material-file-input.svg?branch=master)](https://travis-ci.org/merlosy/dgallagher-ngx-material-file-input) [![npm](https://img.shields.io/npm/dt/dgallagher-ngx-material-file-input.svg)](https://www.npmjs.com/package/dgallagher-ngx-material-file-input) [![](http://img.badgesize.io/https://unpkg.com/dgallagher-ngx-material-file-input@latest/bundles/dgallagher-ngx-material-file-input.umd.min.js?label=full%20size%20as%20min.js&compression=gzip&style=square&color=02adff)](https://www.npmjs.com/package/dgallagher-ngx-material-file-input) [![Coverage Status](https://coveralls.io/repos/github/merlosy/dgallagher-ngx-material-file-input/badge.svg)](https://coveralls.io/github/merlosy/dgallagher-ngx-material-file-input) [![Known Vulnerabilities](https://snyk.io/test/github/merlosy/dgallagher-ngx-material-file-input/badge.svg)](https://snyk.io/test/github/merlosy/dgallagher-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://merlosy.github.io/dgallagher-ngx-material-file-input) ## Install ``` npm i dgallagher-ngx-material-file-input ``` ## API reference ### MaterialFileInputModule ```ts import { MaterialFileInputModule } from 'dgallagher-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 }]; ``` ### FileInputComponent selector: `` implements: [MatFormFieldControl](https://material.angular.io/components/form-field/api#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"](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 {{ 104857600 | byteFormat }} ``` _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 --- _Source: https://npm.io/package/material-file-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._