Ng-input-file-upload NPM

Ngx-Input-File-Upload

This project was generated in Angular 5.1.1

Implementation

####1) Install: npm install ng-input-file-upload

####2) Import: in app module include:

import { NgInputFileUploadModule } from 'ng-input-file-upload'

imports: ..., NgInputFileUploadModule ,

Alt text

####3) Add labels Html

<ng-input-file-upload></ng-input-file-upload>

NOTA:

You can add the verification of extensions with: [acceptHtml]="'image/*'" [acceptTs]="'/image-*/'"

You can change the color of the effect with: [activeColor]="red"

Import Icons: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

####4) Get data from the files:

1) In your component: import { NgInputFileUploadComponent } from 'ng-input-file-upload'

export class AppComponent { @ViewChild(NgInputFileUploadComponent) private NgInputFileUploadComponent: NgInputFileUploadComponent; acceptHtml="image/*" acceptTs=/image-*/ activeColor: string = '#3366CC';

change(){ console.log(this.NgInputFileUploadComponent.imageData); console.log(this.NgInputFileUploadComponent.imageSrc); console.log(this.NgInputFileUploadComponent.imageLoaded); } }

2) In your html: <ng-input-file-upload [acceptHtml]="acceptHtml" [acceptTs]="acceptTs" [activeColor]="activeColor"></ng-input-file-upload> <br> <button (click)="change()">get data - console</button>