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 {
````
+### 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
+
+
+
+
+
+````
### 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 = new EventEmitter();
-
+ onPreviewData: EventEmitter = 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 = new EventEmitter();
-
+ onPreviewData: EventEmitter = 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 = new EventEmitter(true);
-
+ _previewEmitter: EventEmitter = 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);
}