ngx-custom-material-file-input

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.

• Latest version is using Angular 21

From Angular 21 onwards, it is only supported as a standalone component.

material-file-input

This project provides :

• ngx-mat-file-input component, to use inside Angular Material mat-form-field
• a FileValidator with acceptedMimeTypes, to limit the format types using the mime types
• a FileValidator with maxContentSize, to limit the file size
• a FileValidator with minFileCount and maxFileCount, to limit the loaded files
• a ByteFormatPipe to format the file size in a human-readable format
• a previewUrls to receive the images/file as a url to show in a preview

For more code samples, have a look at the DEMO SITE or in the release notes.

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	Added in Version
@Input() valuePlaceholder: string	Placeholder for file names, empty by default	v1
@Input() multiple: boolean	Allows multiple file inputs, false by default	v1
@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.	v1
@Input() accept: string	Any value that accept attribute can get. more about "accept"	v1
@Input() checkDuplicates: boolean	Skip duplicated files if the property is added, false by default	v21
value: FileInput	Form control value	v1
empty: boolean	Whether the input is empty (no files) or not	v1
clear(): (event?) => void	Removes all files from the input	v1
previewUrls: string[]	Contains a generate url in memory to show the previews of the files	v19
@Input() defaultIconBase64: string	Set the default icon for the previews of files that are not images, is a base64 string, example: data:image/svg+xml;base64,PHN2ZyB.....	v19

ByteFormatPipe

Example

<span>{{ 104857600 | byteFormat }}</span>

Output: 100 MB

FileValidator

Name	Description	Error structure	Added in Version
maxContentSize(value: number): ValidatorFn	Limit the total file(s) size to the given value	{ actualSize: number, maxSize: number }	v1
acceptedMimeTypes(value: string): ValidatorFn	Limit the mime types valid to use given value	{ validTypes: string }	v18
minFileCount(value: number): ValidatorFn	Limit the total of minimum file(s) loaded to the given value	{ minCount: number, actualCount: number }	v20
maxFileCount(value: number): ValidatorFn	Limit the total of maximum file(s) loaded to the given value	{ maxCount: number, actualCount: number }	v20

Sponsored by: MyTalentAid