ng2-file-size)

![Build Status](https://travis-ci.org/pkantsedalov/ng2-file-size)

Table of Contents generated with DocToc

- Description
- Installation
- Usage
- Demo
- Acknowledgments
- Development

Description

Angular 2 validation directive for checking 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:

``typescript 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 {}

2. then use the directive:

`html type="file" [ng2FileSize]="{ min: 1024 }" [(ngModel)]="myFile" /> type="file" [ng2FileSize]="{ max: 1024 }" [(ngModel)]="myFile" /> type="file" [ng2FileSize]="{ min: 1024, max: 1024 * 1024 }" [fileSizeErrorMsg]="'File size must be less that 1mb and more that 1kb!'" [(ngModel)]="myFile" />

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 servecommand; 3.2.npm build - created ./distdirectory in the end; 3.3npm 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.

Usage

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

1. import the module to your one:

typescript
    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 {}

2. then use the directive:

html
    
          type="file" 
      [ng2FileSize]="{ min: 1024 }" 
      [(ngModel)]="myFile"
    />
    
    
          type="file" 
      [ng2FileSize]="{ max: 1024 }" 
      [(ngModel)]="myFile"
    />
    
    
          type="file" 
      [ng2FileSize]="{ min: 1024, max: 1024 * 1024 }"
      [fileSizeErrorMsg]="'File size must be less that 1mb and more that 1kb!'"
      [(ngModel)]="myFile"
    />

    
          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

directory you can find the directive sources & unit tests, in the

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.