From 00069dba932ce6d3551008d38965fe88e04eaff9 Mon Sep 17 00:00:00 2001
From: Denko Manceski <denkomanceski@gmail.com>
Date: Sun, 28 Aug 2016 12:27:23 +0200
Subject: [PATCH] Preview Functionality (#66)

* added preview event

* added preview event also for file-drop

* updated README (preview image and manual upload)

* previewData variable was missing
---
 README.md                        | 48 ++++++++++++++++++++++++++++++++
 src/directives/ng-file-drop.ts   | 12 ++++----
 src/directives/ng-file-select.ts |  9 ++++--
 src/services/ng2-uploader.ts     | 18 ++++++++----
 4 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 02f6a151..4d311658 100644
--- a/README.md
+++ b/README.md
@@ -240,7 +240,55 @@ export class MultipleProgressbar {
 </div>
 ````
 
+### Image preview example and manual upload
 
+`component.ts`
+````typescript
+import {Component, NgZone} from '@angular/core';
+import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
+
+@Component({
+  selector: 'image-preview',
+  templateUrl: 'app/components/image-preview/image-preview.html',
+  directives: [UPLOAD_DIRECTIVES]
+})
+export class ImagePreview {
+  @ViewChild(NgFileSelect) private fileSelect: NgFileSelect;
+  previewData = ''
+  options: Object = {
+    url: 'http://localhost:10050/upload',
+    previewUrl: true,
+    autoUpload: false
+  };
+
+  constructor() {
+    
+  }
+  getData(data) {
+     this.previewData = data;
+  }
+  upload() {
+     this.fileSelect.uploader.uploadFilesInQueue();
+  }
+
+
+}
+````
+
+`component.html`
+````html
+<div [ng-file-select]="options"
+     (onUpload)="handleUpload($event)"
+     (onPreviewData)="getData($event)">
+</div>
+<img [src]="previewData"/>
+<button (click)="clearImage()">
+    Clear
+</button>
+<button (click)="upload()">
+    Upload
+</button>
+````
 ### Token-authorized call example
 
 `component.ts`
diff --git a/src/directives/ng-file-drop.ts b/src/directives/ng-file-drop.ts
index 865ed1b4..409c4c1a 100644
--- a/src/directives/ng-file-drop.ts
+++ b/src/directives/ng-file-drop.ts
@@ -4,13 +4,13 @@ import {Ng2Uploader} from '../services/ng2-uploader';
 @Directive({
   selector: '[ng-file-drop]',
   inputs: ['options: ng-file-drop'],
-  outputs: ['onUpload']
+  outputs: ['onUpload', 'onPreviewData']
 })
 export class NgFileDrop {
   uploader: Ng2Uploader;
   options: any;
   onUpload: EventEmitter<any> = new EventEmitter();
-
+  onPreviewData: EventEmitter<any> = new EventEmitter();
   constructor(public el: ElementRef) {
     this.uploader = new Ng2Uploader();
     setTimeout(() => {
@@ -20,7 +20,9 @@ export class NgFileDrop {
     this.uploader._emitter.subscribe((data: any) => {
       this.onUpload.emit(data);
     });
-
+    this.uploader._previewEmitter.subscribe((data: any) => {
+      this.onPreviewData.emit(data);
+    });
     this.initEvents();
   }
 
@@ -36,12 +38,12 @@ export class NgFileDrop {
         this.uploader.addFilesToQueue(files);
       }
     }, false);
-    
+
     this.el.nativeElement.addEventListener('dragenter', (e: DragEvent) => {
       e.stopPropagation();
       e.preventDefault();
     }, false);
-    
+
     this.el.nativeElement.addEventListener('dragover', (e: DragEvent) => {
       e.stopPropagation();
       e.preventDefault();
diff --git a/src/directives/ng-file-select.ts b/src/directives/ng-file-select.ts
index 1b75ce84..e9b07b3f 100644
--- a/src/directives/ng-file-select.ts
+++ b/src/directives/ng-file-select.ts
@@ -4,14 +4,14 @@ import {Ng2Uploader} from '../services/ng2-uploader';
 @Directive({
   selector: '[ng-file-select]',
   inputs: ['options: ng-file-select'],
-  outputs: ['onUpload'],
+  outputs: ['onUpload', 'onPreviewData'],
   host: { '(change)': 'onFiles()' }
 })
 export class NgFileSelect {
   uploader: Ng2Uploader;
   options: any;
   onUpload: EventEmitter<any> = new EventEmitter();
-
+  onPreviewData: EventEmitter<any> = new EventEmitter();
   constructor(public el: ElementRef) {
     this.uploader = new Ng2Uploader();
     setTimeout(() => {
@@ -21,6 +21,9 @@ export class NgFileSelect {
     this.uploader._emitter.subscribe((data: any) => {
       this.onUpload.emit(data);
     });
+    this.uploader._previewEmitter.subscribe((data: any) => {
+      this.onPreviewData.emit(data);
+    })
   }
 
   onFiles(): void {
@@ -29,4 +32,4 @@ export class NgFileSelect {
       this.uploader.addFilesToQueue(files);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/services/ng2-uploader.ts b/src/services/ng2-uploader.ts
index e85eb58a..4766c438 100644
--- a/src/services/ng2-uploader.ts
+++ b/src/services/ng2-uploader.ts
@@ -68,10 +68,10 @@ export class Ng2Uploader {
   authTokenPrefix: string = "Bearer";
   authToken: string = undefined;
   fieldName: string = "file";
-
+  previewUrl: boolean = false;
   _queue: any[] = [];
   _emitter: EventEmitter<any> = new EventEmitter(true);
-
+  _previewEmitter: EventEmitter<any> = new EventEmitter(true);
   setOptions(options: any): void {
 
     this.url = options.url != null ? options.url : this.url;
@@ -92,7 +92,7 @@ export class Ng2Uploader {
     this.authTokenPrefix = options.authTokenPrefix != null ? options.authTokenPrefix : this.authTokenPrefix;
     this.authToken = options.authToken != null ? options.authToken : this.authToken;
     this.fieldName = options.fieldName != null ? options.fieldName : this.fieldName;
-
+    this.previewUrl = options.previewUrl != null ? options.previewUrl : this.previewUrl;
     if (!this.multiple) {
       this.maxUploads = 1;
     }
@@ -178,12 +178,20 @@ export class Ng2Uploader {
         this._queue.push(file);
       }
     }
-
+    if(this.previewUrl){
+      this.createFileUrl(file)
+    }
     if (this.autoUpload) {
       this.uploadFilesInQueue();
     }
   }
-
+  createFileUrl(file){
+    var reader = new FileReader();
+    reader.addEventListener('load', () => {
+        this._previewEmitter.emit(reader.result)
+    });
+    reader.readAsDataURL(file);
+  }
   removeFileFromQueue(i: number): void {
     this._queue.splice(i, 1);
   }