Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

ng2-file-size

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

ng2-file-size

Angular input file size directive

    0.0.4latest

Version published
Maintainers
1
Yearly downloads
8,459
decreased by-8.74%

Weekly downloads

Changelog

Source

0.0.4 (2017-10-31)

  • Fix of README.
  • Some code improvements.

Readme

Source

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.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc