feat(uploader): new picture uploader component

package.json

@@ -35,6 +35,7 @@
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
     "ng2-bootstrap": "^1.0.16",
+    "ng2-uploader": "^0.5.2",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",
     "tether": "^1.2.4",

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

@@ -7,16 +7,25 @@ import {BlockForm} from './components/blockForm';
 import {HorizontalForm} from './components/horizontalForm';
 import {BasicForm} from './components/basicForm';
 import {WithoutLabelsForm} from './components/withoutLabelsForm';
+import {BaPictureUploader} from '../../../../theme/components';
 
 @Component({
   selector: 'layouts',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm],
+  directives: [BaCard, InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm, BaPictureUploader],
   styles: [],
   template: require('./layouts.html'),
 })
 export class Layouts {
 
+  public defaultPicture = 'assets/img/theme/no-photo.png';
+  public profile:any = {
+    picture: 'assets/img/app/profile/Nasta.png'
+  };
+  public uploaderOptions:any = {
+    // url: 'http://website.com/upload'
+  };
+
   constructor() {
   }
 

src/app/pages/forms/components/layouts/layouts.html

@@ -35,4 +35,11 @@
       </div>
     </div>
   </div>
+  <div class="row">
+    <div class="col-md-2">
+      <ba-card title="Picture Uploader" baCardClass="with-scroll">
+        <ba-picture-uploader [picture]="profile.picture" [defaultPicture]="defaultPicture" [uploaderOptions]="uploaderOptions"></ba-picture-uploader>
+      </ba-card>
+    </div>
+  </div>
 </div>

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

@@ -0,0 +1,90 @@
+import {Component, ViewChild, Input, Output, EventEmitter, ElementRef, Renderer} from '@angular/core';
+import {Ng2Uploader} from 'ng2-uploader/ng2-uploader';
+
+@Component({
+  selector: 'ba-picture-uploader',
+  styles: [require('./baPictureUploader.scss')],
+  template: require('./baPictureUploader.html'),
+  providers: [Ng2Uploader]
+})
+export class BaPictureUploader {
+
+  @Input() defaultPicture:string = '';
+  @Input() picture:string = '';
+
+  @Input() uploaderOptions:any = {};
+  @Input() canDelete:boolean = true;
+
+  onUpload:EventEmitter<any> = new EventEmitter();
+  onUploadCompleted:EventEmitter<any> = new EventEmitter();
+
+  @ViewChild('fileUpload') protected _fileUpload:ElementRef;
+
+  public uploadInProgress:boolean = false;
+
+  constructor(private renderer:Renderer, protected _uploader:Ng2Uploader) {
+  }
+
+  public ngOnInit():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()) {
+        this.uploadInProgress = true;
+        this._uploader.addFilesToQueue(files);
+      }
+    }
+  }
+
+  public bringFileSelector():boolean {
+    this.renderer.invokeElementMethod(this._fileUpload.nativeElement, 'click');
+    return false;
+  }
+
+  public removePicture():boolean {
+    this.picture = '';
+    return false;
+  }
+
+  protected _changePicture(file:File):void {
+    const reader = new FileReader();
+    reader.addEventListener('load', (event:Event) => {
+      this.picture = (<any> event.target).result;
+    }, false);
+    reader.readAsDataURL(file);
+  }
+
+  protected _onUpload(data):void {
+    if (data['done'] || data['abort'] || data['error']) {
+      this._onUploadCompleted(data);
+    } else {
+      this.onUpload.emit(data);
+    }
+  }
+
+  protected _onUploadCompleted(data):void {
+    this.uploadInProgress = false;
+    this.onUploadCompleted.emit(data);
+  }
+
+  protected _canUploadOnServer():boolean {
+    return !!this.uploaderOptions['url'];
+  }
+}

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

@@ -0,0 +1,16 @@
+<div class="picture-group" [ngClass]="{uploading: uploadInProgress}">
+  <div class="picture-wrapper" (click)="bringFileSelector();">
+    <img src="{{ picture }}" *ngIf="picture">
+    <img src="{{ defaultPicture }}" *ngIf="!picture && defaultPicture">
+
+    <div class="loading" *ngIf="uploadInProgress">
+      <div class="spinner">
+        <div class="double-bounce1"></div>
+        <div class="double-bounce2"></div>
+      </div>
+    </div>
+  </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()">
+</div>

src/app/theme/components/baPictureUploader/baPictureUploader.scss

@@ -0,0 +1,114 @@
+@import '../../sass/conf/conf';
+
+.picture-group {
+  border: 1px dashed #b8b8b8;
+  width: 202px;
+  height: 202px;
+  position: relative;
+  cursor: pointer;
+  .picture-wrapper {
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+  i {
+    display: none;
+    position: absolute;
+    font-size: 32px;
+    background: $default;
+    cursor: pointer;
+    color: $primary;
+    top: -11px;
+    right: -11px;
+    height: 26px;
+    border-radius: 50%;
+    &:before {
+      line-height: 26px;
+    }
+    &:hover {
+      color: $danger;
+    }
+  }
+  a.change-picture {
+    display: none;
+    width: 202px;
+    background: rgba(0, 0, 0, 0.7);
+    transition: all 200ms ease-in-out;
+    color: $default-text;
+    text-decoration: none;
+    position: absolute;
+    bottom: -1px;
+    left: -1px;
+    line-height: 32px;
+    text-align: center;
+  }
+  &:hover {
+    i {
+      display: block;
+    }
+    .change-picture {
+      display: block;
+    }
+  }
+
+  .loading {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+  }
+  .spinner {
+    width: 60px;
+    height: 60px;
+    position: relative;
+  }
+
+  .double-bounce1, .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #fff;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+    animation: sk-bounce 2.0s infinite ease-in-out;
+  }
+
+  .double-bounce2 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+  }
+
+  @-webkit-keyframes sk-bounce {
+    0%, 100% {
+      -webkit-transform: scale(0.0)
+    }
+    50% {
+      -webkit-transform: scale(1.0)
+    }
+  }
+
+  @keyframes sk-bounce {
+    0%, 100% {
+      transform: scale(0.0);
+      -webkit-transform: scale(0.0);
+    }
+    50% {
+      transform: scale(1.0);
+      -webkit-transform: scale(1.0);
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export * from './baPictureUploader.component.ts';

src/app/theme/components/index.ts

@@ -7,3 +7,4 @@ export * from './baAmChart';
 export * from './baChartistChart';
 export * from './baBackTop';
 export * from './baFullCalendar';
+export * from './baPictureUploader';