Norwegian Pony Master

    ngx-material-file-input
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    npm version Build Status npm 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

    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 }

    About me

    @jereyleg

    ☆ to show support :)

    Roadmap

    • drop event to add files
    • ideas?

    Kudos to

    Install

    npm i ngx-material-file-input

    DownloadsWeekly Downloads

    11,131

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    132 kB

    Total Files

    23

    Last publish

    Collaborators

    • merlosy