fix(picture uploader): ngx-uploader integration

src/app/pages/forms/components/layouts/layouts.component.ts

@@ -1,4 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
+import { NgUploaderOptions } from 'ngx-uploader';
 
 @Component({
   selector: 'layouts',
@@ -12,8 +13,9 @@ export class Layouts {
   public profile:any = {
     picture: 'assets/img/app/profile/Nasta.png'
   };
-  public uploaderOptions:any = {
+  public uploaderOptions:NgUploaderOptions = {
     // url: 'http://website.com/upload'
+    url: '',
   };
 
   constructor() {

src/app/theme/components/baPictureUploader/baPictureUploader.component.ts

@@ -1,54 +1,40 @@
 import {Component, ViewChild, Input, Output, EventEmitter, ElementRef, Renderer} from '@angular/core';
-import {Ng2Uploader} from 'ng2-uploader/ng2-uploader';
+import { NgUploaderOptions } from 'ngx-uploader';
 
 @Component({
   selector: 'ba-picture-uploader',
   styleUrls: ['./baPictureUploader.scss'],
   templateUrl: './baPictureUploader.html',
-  providers: [Ng2Uploader]
 })
 export class BaPictureUploader {
 
   @Input() defaultPicture:string = '';
   @Input() picture:string = '';
 
-  @Input() uploaderOptions:any = {};
+  @Input() uploaderOptions:NgUploaderOptions = { url: '' };
   @Input() canDelete:boolean = true;
 
-  onUpload:EventEmitter<any> = new EventEmitter();
+  @Output() onUpload = new EventEmitter<any>();
-  onUploadCompleted:EventEmitter<any> = new EventEmitter();
+  @Output() onUploadCompleted = new EventEmitter<any>();
 
   @ViewChild('fileUpload') public _fileUpload:ElementRef;
 
-  public uploadInProgress:boolean = false;
+  public uploadInProgress:boolean;
 
-  constructor(private renderer:Renderer, protected _uploader:Ng2Uploader) {
+  constructor(private renderer: Renderer) {
   }
 
-  public ngOnInit():void {
+  beforeUpload(uploadingFile): void {
-    if (this._canUploadOnServer()) {
-      setTimeout(() => {
-        this._uploader.setOptions(this.uploaderOptions);
-      });
-
-      this._uploader._emitter.subscribe((data) => {
-        this._onUpload(data);
-      });
-    } else {
-      console.warn('Please specify url parameter to be able to upload the file on the back-end');
-    }
-  }
-
-  public onFiles():void {
     let files = this._fileUpload.nativeElement.files;
 
     if (files.length) {
       const file = files[0];
       this._changePicture(file);
 
-      if (this._canUploadOnServer()) {
+      if (!this._canUploadOnServer()) {
+        uploadingFile.setAbort();
+      } else {
         this.uploadInProgress = true;
-        this._uploader.addFilesToQueue(files);
       }
     }
   }

src/app/theme/components/baPictureUploader/baPictureUploader.html

@@ -1,7 +1,7 @@
 <div class="picture-group" [ngClass]="{uploading: uploadInProgress}">
   <div class="picture-wrapper" (click)="bringFileSelector();">
-    <img src="{{ picture }}" *ngIf="picture">
+    <img [src]="picture" *ngIf="picture">
-    <img src="{{ defaultPicture }}" ngIf="{{!picture && defaultPicture}}">
+    <img [src]="defaultPicture" *ngIf="!picture && defaultPicture">
 
     <div class="loading" *ngIf="uploadInProgress">
       <div class="spinner">
@@ -12,5 +12,8 @@
   </div>
   <i class="ion-ios-close-outline" (click)="removePicture();" *ngIf="picture && canDelete"></i>
   <a href class="change-picture" (click)="bringFileSelector();">Change profile Picture</a>
-  <input #fileUpload type="file" hidden="true" id="uploadFile" (change)="onFiles()">
+  <input #fileUpload ngFileSelect [options]="uploaderOptions"
+         (onUpload)="_onUpload($event)"
+         (beforeUpload)="beforeUpload($event)"
+         type="file" hidden="true">
 </div>

src/app/theme/nga.module.ts

@@ -2,6 +2,7 @@ import { NgModule, ModuleWithProviders }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { NgUploaderModule } from 'ngx-uploader';
 
 import {
   BaThemeConfig
@@ -107,6 +108,7 @@ const NGA_VALIDATORS = [
     RouterModule,
     FormsModule,
     ReactiveFormsModule,
+    NgUploaderModule,
   ],
   exports: [
     ...NGA_PIPES,