Awesome

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 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 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<FileInput> 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 }`