Preview Functionality (bleenco#66)

* added preview event

* added preview event also for file-drop

* updated README (preview image and manual upload)

* previewData variable was missing

README.md

@@ -241,7 +241,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`

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();

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);
     }
   }
-}
+}

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);
   }