Ng File Picker

This is a configurable file picker build for Angular applications.
Supports (Angular 2+) versions.

Installation:

1. Download from npm:
   npm install ng-file-picker --save
2. Import the NgFilePickerModule module:
   import { NgFilePickerModule } from 'ng-file-picker';
3. Add NgFilePickerModule to your module imports:

Usage

Put the ng-file-picker component wherever you need it.

Attributes (Input):

Name	Type	Default	Description
id	String	undefined	Unique identifier of your input filed.
name	String	undefined	Unique name of your input
multiple	Boolean	false	If true, the file picker allows to upload multiple files else it alows only one file at a time.
disabled	Boolean	false	Tracks whether the control is disabled
formControlName	String	undefined	Form control name of your field which is specified in the FormGroup.
ngModel	Variable	undefined	Tracks the value bound to this directive.

Methods (Output):

Name	Description
change	Event bound to classical input change event
ngModelChange	Event emitter for producing the ngModelChange event after the view model update

API:

Container component:

import {Component, ViewChild} from '@angular/core';  

@Component({  
selector: 'my-container',  
template: `  
<ng-file-picker id="test" name="file" [(ngModel)]="file" (ngModelChange)="getFile($event)" multiple="false"></ng-file-picker>  
`  
});
export class MyContainerComponent implements OnInit {
  file: any;

  getFile(event: any) {
    console.log("event", event, this.file);
    ....
  }
}

Container Module:

import { NgFilePickerModule } from 'ng-file-picker';
import { MyContainerComponent } from './my-container.component';

@NgModule({
  declarations: [
    MyContainerComponent
  ],
  imports: [
    ...,
    NgFilePickerModule
  ]
})

export class MyContainerModule { }