ngx-custom-material-file-input
v18.0.0
Published
File input management for Angular Material
Downloads
3,142
Maintainers
Readme
ngx-custom-material-file-input
This project is a copy of ngx-material-file-input, this was made from angular 14 as a new project, only what was necessary was added and is already updated.
| Library Version | Angular Version | |-----------------|-----------------| | 1.0.0 | 14.0.0 | | 2.0.0 | 15.0.0 | | 3.0.0 | 16.0.0 | | 4.0.0 | 17.0.0 | | 18.0.0 | 18.0.0 |
From now on, the package version will be the same as the Angular version so I don't have to update the table all the time. In this version 18, a new validator for MIME types was added, an example was added in the release notes.
This text is a copy from the original (changing only the necessary package names):
material-file-input
This project provides :
ngx-mat-file-input
component, to use inside Angular Materialmat-form-field
- a
FileValidator
withacceptedMimeTypes
, to limit the format types using the mime types - a
FileValidator
withmaxContentSize
, 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
Install
npm i ngx-custom-material-file-input
API reference
MaterialFileInputModule
import { MaterialFileInputModule } from 'ngx-custom-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
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 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 |
ByteFormatPipe
Example
<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 }
|
| acceptedMimeTypes(value: string
): ValidatorFn
| Limit the mime types valid to use given value | { validTypes: string }
|