ng2-file-size

Table of Contents generated with DocToc

• Description
• Installation
• Usage
• Demo
• Acknowledgments
• Development

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

2. 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.