ng2-file-size

    0.0.4 • Public • Published

    ng2-file-size npm version npm downloads

    Build Status

    Table of Contents generated with DocToc

    Description

    Angular 2 validation directive for checking <input type="file" /> value to be of the valid size.

    Works both with one & multiple files mode.

    Installation

    npm install ng2-file-size --save

    npm i ng2-file-size -S (shortcut)

    Usage

    Attention: in beta version use [ng2FileSizeErrorMsg] param instead of [fileSizeErrorMsg] one.

    1. import the module to your one:
        import { NgModule }    from '@angular/core';
        import { FormsModule } from '@angular/forms';  
          
        import { Ng2FileSizeModule } from 'ng2-file-size';
     
        @NgModule({
          imports: [
            // other core modules
            FormsModule, // required because of NgModel dependency
            Ng2FileSizeModule,
            // other app modules
          ]
        })
        class MyModule {}
     
    1. then use the directive:
        <!-- 
            1. Make it's size restricted by min value (in bytes).
            2. The error message is a default one: 'File size is invalid' 
        -->
        <input 
          type="file" 
          [ng2FileSize]="{ min: 1024 }" 
          [(ngModel)]="myFile"
        />
        
        <!-- 
            1. Make it's size restricted by max value (in bytes).
            2. The error message is a default one: 'File size is invalid'
        -->
        <input 
          type="file" 
          [ng2FileSize]="{ max: 1024 }" 
          [(ngModel)]="myFile"
        />
        
        <!-- 
            1. Make it's size restricted by min & max values (in bytes).
            2. The error message is customized to 'File size must be less that 1mb and more that 1kb!' 
        -->
        <input 
          type="file" 
          [ng2FileSize]="{ min: 1024, max: 1024 * 1024 }"
          [fileSizeErrorMsg]="'File size must be less that 1mb and more that 1kb!'"
          [(ngModel)]="myFile"
        />
     
        <!--
            1. Make it's size restricted by dynamic values (in bytes).
            2. The error message is customized dynamically
        -->
        <input
          type="file"
          [ng2FileSize]="fileSizeRestrictions"
          [fileSizeErrorMsg]="customErrorMessage"
          [(ngModel)]="myFile"
        />

    Demo

    See it here.

    Acknowledgments

    I express my gratitude to the valor-software team. This project structure is based on their ng2-file-upload solution, their tslint configuration and npm submodules manager.

    Development

    1. Clone/fork it

    2. In ./src directory you can find the directive sources & unit tests, in the ./demo one - the files for Github Pages demo.

    3. Use next npm scripts for development (they use angular-cli and ngm-cli):

      3.1. npm start serves with ng serve command;

      3.2. npm build - created ./dist directory in the end;

      3.3 npm test - runs unit tests with ng test using Karma and Angular 2 testing tools.

      3.4 npm run e2e - runs e2e tests using Protractor and Selenium Webdriver.

    Install

    npm i ng2-file-size

    DownloadsWeekly Downloads

    159

    Version

    0.0.4

    License

    MIT

    Last publish

    Collaborators

    • pkantsedalov