16.0.0 • Published 8 months ago
ng-file-picker v16.0.0
Ng File Picker
This is a configurable file picker build for Angular applications.
Supports (Angular 2+) versions.
Installation:
- Download from npm:
npm install ng-file-picker --save - Import the
NgFilePickerModulemodule:import { NgFilePickerModule } from 'ng-file-picker'; - Add
NgFilePickerModuleto 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 { }