1.0.0

ng2-uploader.ts

@@ -1,14 +1,11 @@
-import {Ng2Uploader} from './src/services/ng2-uploader';
-import {NgFileSelect} from './src/directives/ng-file-select';
-import {NgFileDrop} from './src/directives/ng-file-drop';
+import { NgFileSelectDirective } from './src/directives/ng-file-select';
+import { NgFileDropDirective } from './src/directives/ng-file-drop';
 
 export * from './src/services/ng2-uploader';
 export * from './src/directives/ng-file-select';
 export * from './src/directives/ng-file-drop';
 
-export default {
-  directives: [NgFileSelect, NgFileDrop],
-  providers: [Ng2Uploader]
-};
-
-export const UPLOAD_DIRECTIVES: [any] = [NgFileSelect, NgFileDrop];
+export const UPLOAD_DIRECTIVES: any[] = [
+  NgFileDropDirective,
+  NgFileSelectDirective
+];

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ng2-uploader",
   "description": "Angular2 File Uploader",
-  "version": "0.5.15",
+  "version": "1.0.0",
   "license": "MIT",
   "main": "ng2-uploader.ts",
   "author": "Jan Kuri <[email protected]>",

src/directives/ng-file-drop.ts

@@ -1,16 +1,24 @@
-import {Directive, ElementRef, EventEmitter} from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  HostListener
+} from '@angular/core';
 import {Ng2Uploader} from '../services/ng2-uploader';
 
 @Directive({
-  selector: '[ng-file-drop]',
-  inputs: ['options: ng-file-drop'],
-  outputs: ['onUpload', 'onPreviewData']
+  selector: '[ngFileDrop]'
 })
-export class NgFileDrop {
+export class NgFileDropDirective {
+  @Input() options: any;
+  @Output() onUpload: EventEmitter<any> = new EventEmitter();
+  @Output() onPreviewData: EventEmitter<any> = new EventEmitter();
+
+  files: any[] = [];
   uploader: Ng2Uploader;
-  options: any;
-  onUpload: EventEmitter<any> = new EventEmitter();
-  onPreviewData: EventEmitter<any> = new EventEmitter();
+
   constructor(public el: ElementRef) {
     this.uploader = new Ng2Uploader();
     setTimeout(() => {
@@ -19,10 +27,15 @@ export class NgFileDrop {
 
     this.uploader._emitter.subscribe((data: any) => {
       this.onUpload.emit(data);
+      if (data.done) {
+        this.files = this.files.filter(f => f.name !== data.originalName);
+      }
     });
+
     this.uploader._previewEmitter.subscribe((data: any) => {
       this.onPreviewData.emit(data);
     });
+
     this.initEvents();
   }
 
@@ -31,11 +44,9 @@ export class NgFileDrop {
       e.stopPropagation();
       e.preventDefault();
 
-      let dt = e.dataTransfer;
-      let files = dt.files;
-
-      if (files.length) {
-        this.uploader.addFilesToQueue(files);
+      this.files = Array.from(e.dataTransfer.files);
+      if (this.files.length) {
+        this.uploader.addFilesToQueue(this.files);
       }
     }, false);
 
@@ -49,4 +60,31 @@ export class NgFileDrop {
       e.preventDefault();
     }, false);
   }
+
+  filterFilesByExtension(): void {
+    this.files = this.files.filter(f => {
+      if (this.options.allowedExtensions.indexOf(f.type) !== -1) {
+        return true;
+      }
+
+      let ext: string = f.name.split('.').pop();
+      if (this.options.allowedExtensions.indexOf(ext) !== -1 ) {
+        return true;
+      }
+
+      return false;
+    });
+  }
+
+  @HostListener('change') onChange(): void {
+    this.files = Array.from(this.el.nativeElement.files);
+
+    if (this.options.filterExtensions && this.options.allowedExtensions) {
+      this.filterFilesByExtension();
+    }
+
+    if (this.files.length) {
+      this.uploader.addFilesToQueue(this.files);
+    }
+  }
 }

src/directives/ng-file-select.ts

@@ -1,17 +1,24 @@
-import {Directive, ElementRef, EventEmitter} from '@angular/core';
-import {Ng2Uploader} from '../services/ng2-uploader';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  HostListener
+} from '@angular/core';
+import { Ng2Uploader } from '../services/ng2-uploader';
 
 @Directive({
-  selector: '[ng-file-select]',
-  inputs: ['options: ng-file-select'],
-  outputs: ['onUpload', 'onPreviewData'],
-  host: { '(change)': 'onFiles()' }
+  selector: '[ngFileSelect]'
 })
-export class NgFileSelect {
+export class NgFileSelectDirective {
+  @Input() options: any;
+  @Output() onUpload: EventEmitter<any> = new EventEmitter();
+  @Output() onPreviewData: EventEmitter<any> = new EventEmitter();
+
+  files: any[] = [];
   uploader: Ng2Uploader;
-  options: any;
-  onUpload: EventEmitter<any> = new EventEmitter();
-  onPreviewData: EventEmitter<any> = new EventEmitter();
+
   constructor(public el: ElementRef) {
     this.uploader = new Ng2Uploader();
     setTimeout(() => {
@@ -20,16 +27,39 @@ export class NgFileSelect {
 
     this.uploader._emitter.subscribe((data: any) => {
       this.onUpload.emit(data);
+      if (data.done) {
+        this.files = this.files.filter(f => f.name !== data.originalName);
+      }
     });
+
     this.uploader._previewEmitter.subscribe((data: any) => {
       this.onPreviewData.emit(data);
-    })
+    });
   }
 
-  onFiles(): void {
-    let files = this.el.nativeElement.files;
-    if (files.length) {
-      this.uploader.addFilesToQueue(files);
+  filterFilesByExtension(): void {
+    this.files = this.files.filter(f => {
+      if (this.options.allowedExtensions.indexOf(f.type) !== -1) {
+        return true;
+      }
+
+      let ext: string = f.name.split('.').pop();
+      if (this.options.allowedExtensions.indexOf(ext) !== -1 ) {
+        return true;
+      }
+
+      return false;
+    });
+  }
+
+  @HostListener('change') onChange(): void {
+    this.files = Array.from(this.el.nativeElement.files);
+    if (this.options.filterExtensions && this.options.allowedExtensions) {
+      this.filterFilesByExtension();
+    }
+
+    if (this.files.length) {
+      this.uploader.addFilesToQueue(this.files);
     }
   }
 }