7.0.2 • Published 1 year ago

@franbueno/ngx-material-file-input v7.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

npm version Build Status npm npm.io Coverage Status Known Vulnerabilities

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

Install

npm i ngx-material-file-input

API reference

MaterialFileInputModule

import { MaterialFileInputModule } from '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

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

NameDescription
@Input() valuePlaceholder: stringPlaceholder for file names, empty by default
@Input() multiple: booleanAllows multiple file inputs, false by default
@Input() autofilled: booleanWhether the input is currently in an autofilled state. If property is not present on the control it is assumed to be false.
@Input() accept: stringAny value that accept attribute can get. more about "accept"
value: FileInputForm control value
empty: booleanWhether the input is empty (no files) or not
clear(): (event?) => voidRemoves all files from the input

ByteFormatPipe

Example

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

Output: 100 MB

FileValidator

NameDescriptionError structure
maxContentSize(value: number): ValidatorFnLimit the total file(s) size to the given value{ actualSize: number, maxSize: number }

About me

@jereyleg

to show support :)

Roadmap

  • drop event to add files
  • ideas?

Kudos to

7.0.0

1 year ago

6.0.1

1 year ago

7.0.2

1 year ago

7.0.1

1 year ago

5.0.1

2 years ago

5.0.0

2 years ago