From 7d03461efbebad89ea41d09a789824957da61582 Mon Sep 17 00:00:00 2001
From: pornmongkon <pornmongkonp@gmail.com>
Date: Wed, 12 Apr 2017 23:11:49 +0700
Subject: [PATCH] feat(layouts): add file uploader (#842)

---
 .../components/layouts/layouts.component.ts   |  5 ++
 .../forms/components/layouts/layouts.html     |  5 ++
 .../baFileUploader.component.ts               | 59 +++++++++++++++++++
 .../baFileUploader/baFileUploader.html        |  7 +++
 .../baFileUploader/baFileUploader.scss        |  0
 .../theme/components/baFileUploader/index.ts  |  1 +
 src/app/theme/components/index.ts             |  1 +
 src/app/theme/nga.module.ts                   |  6 +-
 8 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100755 src/app/theme/components/baFileUploader/baFileUploader.component.ts
 create mode 100755 src/app/theme/components/baFileUploader/baFileUploader.html
 create mode 100755 src/app/theme/components/baFileUploader/baFileUploader.scss
 create mode 100755 src/app/theme/components/baFileUploader/index.ts

diff --git a/src/app/pages/forms/components/layouts/layouts.component.ts b/src/app/pages/forms/components/layouts/layouts.component.ts
index cad801c4cb..9fa270ff62 100644
--- a/src/app/pages/forms/components/layouts/layouts.component.ts
+++ b/src/app/pages/forms/components/layouts/layouts.component.ts
@@ -16,6 +16,11 @@ export class Layouts {
     url: '',
   };
 
+  public fileUploaderOptions:NgUploaderOptions = {
+    // url: 'http://website.com/upload'
+    url: '',
+  };
+  
   constructor() {
   }
 
diff --git a/src/app/pages/forms/components/layouts/layouts.html b/src/app/pages/forms/components/layouts/layouts.html
index c3fb5eda97..5dd812a27b 100644
--- a/src/app/pages/forms/components/layouts/layouts.html
+++ b/src/app/pages/forms/components/layouts/layouts.html
@@ -41,5 +41,10 @@
         <ba-picture-uploader [picture]="profile.picture" [defaultPicture]="defaultPicture" [uploaderOptions]="uploaderOptions"></ba-picture-uploader>
       </ba-card>
     </div>
+    <div class="col-md-6">
+      <ba-card title="File Uploader" baCardClass="with-scroll">
+        <ba-file-uploader [fileUploaderOptions]="fileUploaderOptions"></ba-file-uploader>
+      </ba-card>
+    </div>
   </div>
 </div>
diff --git a/src/app/theme/components/baFileUploader/baFileUploader.component.ts b/src/app/theme/components/baFileUploader/baFileUploader.component.ts
new file mode 100755
index 0000000000..82939fe3c0
--- /dev/null
+++ b/src/app/theme/components/baFileUploader/baFileUploader.component.ts
@@ -0,0 +1,59 @@
+import { Component, ViewChild, Input, Output, EventEmitter, ElementRef, Renderer } from '@angular/core';
+import { NgUploaderOptions } from 'ngx-uploader';
+@Component({
+  selector: 'ba-file-uploader',
+  styleUrls: ['./baFileUploader.scss'],
+  templateUrl: './baFileUploader.html',
+})
+export class BaFileUploader {
+  @Input() fileUploaderOptions: NgUploaderOptions = { url: '' };
+  @Output() onFileUpload = new EventEmitter<any>();
+  @Output() onFileUploadCompleted = new EventEmitter<any>();
+  @Input() defaultValue: string = '';
+
+  @ViewChild('fileUpload') public _fileUpload: ElementRef;
+  @ViewChild('inputText') public _inputText: ElementRef;
+
+  public uploadFileInProgress: boolean;
+  constructor(private renderer: Renderer) { 
+  }
+
+  bringFileSelector(): boolean {
+    this.renderer.invokeElementMethod(this._fileUpload.nativeElement, 'click');
+    return false;
+  }
+
+  beforeFileUpload(uploadingFile): void {
+    let files = this._fileUpload.nativeElement.files;
+    if (files.length) {
+      const file = files[0];
+      this._onChangeFileSelect(files[0])
+      if (!this._canFleUploadOnServer()) {
+        uploadingFile.setAbort();
+      } else {
+        this.uploadFileInProgress = true;
+      }
+    }
+  }
+
+  _onChangeFileSelect(file) {
+    this._inputText.nativeElement.value = file.name
+  }
+
+  _onFileUpload(data): void {
+    if (data['done'] || data['abort'] || data['error']) {
+      this._onFileUploadCompleted(data);
+    } else {
+      this.onFileUpload.emit(data);
+    }
+  }
+
+  _onFileUploadCompleted(data): void {
+    this.uploadFileInProgress = false;
+    this.onFileUploadCompleted.emit(data);
+  }
+
+  _canFleUploadOnServer(): boolean {
+    return !!this.fileUploaderOptions['url'];
+  }
+}
diff --git a/src/app/theme/components/baFileUploader/baFileUploader.html b/src/app/theme/components/baFileUploader/baFileUploader.html
new file mode 100755
index 0000000000..b3fc5a2751
--- /dev/null
+++ b/src/app/theme/components/baFileUploader/baFileUploader.html
@@ -0,0 +1,7 @@
+<input #fileUpload ngFileSelect type="file" [options]="fileUploaderOptions" (onUpload)="_onFileUpload($event)" (beforeUpload)="beforeFileUpload($event)" hidden="true">
+<div class="input-group" [ngClass]="{uploading: uploadFileInProgress}">
+    <input #inputText type="text" [value]="defaultValue" class="form-control" readonly>
+    <span class="input-group-btn">
+      <button class="btn btn-success" type="button" (click)="bringFileSelector();">Browse</button>
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/app/theme/components/baFileUploader/baFileUploader.scss b/src/app/theme/components/baFileUploader/baFileUploader.scss
new file mode 100755
index 0000000000..e69de29bb2
diff --git a/src/app/theme/components/baFileUploader/index.ts b/src/app/theme/components/baFileUploader/index.ts
new file mode 100755
index 0000000000..a6e7084b52
--- /dev/null
+++ b/src/app/theme/components/baFileUploader/index.ts
@@ -0,0 +1 @@
+export * from './baFileUploader.component';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index 31ef464dd9..b4f0e10bab 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -12,3 +12,4 @@ export * from './baFullCalendar';
 export * from './baPictureUploader';
 export * from './baCheckbox';
 export * from './baMultiCheckbox';
+export * from './baFileUploader';
diff --git a/src/app/theme/nga.module.ts b/src/app/theme/nga.module.ts
index 2a99941256..eef0d69e91 100644
--- a/src/app/theme/nga.module.ts
+++ b/src/app/theme/nga.module.ts
@@ -27,7 +27,8 @@ import {
   BaMultiCheckbox,
   BaPageTop,
   BaPictureUploader,
-  BaSidebar
+  BaSidebar,
+  BaFileUploader
 } from './components';
 
 import { BaCardBlur } from './components/baCard/baCardBlur.directive';
@@ -70,7 +71,8 @@ const NGA_COMPONENTS = [
   BaMultiCheckbox,
   BaPageTop,
   BaPictureUploader,
-  BaSidebar
+  BaSidebar,
+  BaFileUploader
 ];
 
 const NGA_DIRECTIVES = [