This project provides :
ngx-mat-file-inputcomponent, to use inside Angular Materialmat-form-field- a
FileValidatorwithmaxContentSize, to limit the file size - a
ByteFormatPipeto format the file size in a human-readable format
For more code samples, have a look at the DEMO SITE
npm i ngx-material-file-input import { MaterialFileInputModule } from 'ngx-material-file-input'; @NgModule({ imports: [ // the module for this lib MaterialFileInputModule ] })Change the unit of the ByteFormat pipe
export const config: FileInputConfig = { sizeUnit: 'Octet' }; // add with module injection providers: [{ provide: NGX_MAT_FILE_INPUT_CONFIG, useValue: config }];selector: <ngx-mat-file-input>
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 |
Example
<span>{{ 104857600 | byteFormat }}</span>Output: 100 MB
| Name | Description | Error structure |
|---|---|---|
maxContentSize(value: number): ValidatorFn | Limit the total file(s) size to the given value | { actualSize: number, maxSize: number } |
☆ to show support :)
- drop event to add files
- ideas?
- https://github.com/dherges/ng-packagr
- Jason Aden - Packaging Angular Libraries https://www.youtube.com/watch?v=QfvwQEJVOig