multiple event emit solved by adding emit type of emitter

jayprajapati857 · May 1, 2020 · 2390355 · 2390355
1 parent 5c42f9f
commit 2390355
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 80 deletions.
diff --git a/projects/ngx-uploader-directive/src/lib/directives/ngx-uploader-drop.directive.ts b/projects/ngx-uploader-directive/src/lib/directives/ngx-uploader-drop.directive.ts
@@ -22,6 +22,7 @@
  */
 
 // tslint:disable: max-line-length
+// tslint:disable: no-console
 import { Directive, Input, EventEmitter, Output, ElementRef, HostListener } from '@angular/core';
 import { IUploadOptions, IUploadInput, IUploadOutput } from '../models/ngx-uploader-directive-models';
 import { Subscription } from 'rxjs';
@@ -35,6 +36,8 @@ import { NgxUploaderDirectiveService } from '../ngx-uploader-directive.service';
 
 export class NgxUploaderDropDirective {
 
+  private devEnv = true;
+
   @Input() options: IUploadOptions;
   @Input() uploadInput: EventEmitter<IUploadInput>;
   @Output() uploadOutput: EventEmitter<IUploadOutput>;
@@ -70,12 +73,19 @@ export class NgxUploaderDropDirective {
     // Adding events to subscriptions
     this.subscriptions.push(
       this.uploadService.fileServiceEvents.subscribe((event: IUploadOutput) => {
-        this.uploadOutput.emit(event);
+        if (event.fileSelectedEventType === 'DROP' || event.fileSelectedEventType === 'ALL') {
+          if (this.options.logs && this.devEnv) {
+            console.info('Output drop event', event);
+          }
+          this.uploadOutput.emit(event);
+        }
       })
     );
 
     if (this.uploadInput instanceof EventEmitter) {
-      // console.log('Input emit');
+      if (this.options.logs && this.devEnv) {
+        console.info('Input drop Init');
+      }
       this.subscriptions.push(this.uploadService.handleInputEvents(this.uploadInput));
     }
   }
@@ -95,9 +105,9 @@ export class NgxUploaderDropDirective {
     event.stopPropagation();
     event.preventDefault();
 
-    const outputEvent: IUploadOutput = { type: 'drop' };
+    const outputEvent: IUploadOutput = { type: 'drop', fileSelectedEventType: 'DROP' };
     this.uploadOutput.emit(outputEvent);
-    this.uploadService.handleSelectedFiles(event.dataTransfer.files);
+    this.uploadService.handleSelectedFiles(event.dataTransfer.files, 'DROP');
   }
 
   @HostListener('dragover', ['$event'])
@@ -106,7 +116,7 @@ export class NgxUploaderDropDirective {
       return;
     }
 
-    const outputEvent: IUploadOutput = { type: 'dragOver' };
+    const outputEvent: IUploadOutput = { type: 'dragOver', fileSelectedEventType: 'DROP' };
     this.uploadOutput.emit(outputEvent);
   }
 
@@ -116,7 +126,7 @@ export class NgxUploaderDropDirective {
       return;
     }
 
-    const outputEvent: IUploadOutput = { type: 'dragOut' };
+    const outputEvent: IUploadOutput = { type: 'dragOut', fileSelectedEventType: 'DROP' };
     this.uploadOutput.emit(outputEvent);
   }
 

diff --git a/projects/ngx-uploader-directive/src/lib/directives/ngx-uploader-select.directive.ts b/projects/ngx-uploader-directive/src/lib/directives/ngx-uploader-select.directive.ts
@@ -21,6 +21,8 @@
  * SOFTWARE.
  */
 
+// tslint:disable: max-line-length
+// tslint:disable: no-console
 import { Directive, Input, EventEmitter, Output, ElementRef } from '@angular/core';
 import { IUploadOptions, IUploadInput, IUploadOutput } from '../models/ngx-uploader-directive-models';
 import { Subscription } from 'rxjs';
@@ -34,8 +36,10 @@ import { NgxUploaderDirectiveService } from '../ngx-uploader-directive.service';
 
 export class NgxUploaderSelectDirective {
 
+  private devEnv = true;
+
   @Input() options: IUploadOptions;
-  @Input() uploadInput: EventEmitter<IUploadInput>;
+  @Input() uploadInput: EventEmitter<any>;
   @Output() uploadOutput: EventEmitter<IUploadOutput>;
 
   uploadService: NgxUploaderDirectiveService;
@@ -66,14 +70,21 @@ export class NgxUploaderSelectDirective {
     // Adding on change event listener
     this.element.addEventListener('change', this.fileListener, false);
 
-    // Adding events to subscriptions
     this.subscriptions.push(
       this.uploadService.fileServiceEvents.subscribe((event: IUploadOutput) => {
-        this.uploadOutput.emit(event);
+        if (event.fileSelectedEventType === 'SELECT' || event.fileSelectedEventType === 'ALL') {
+          if (this.options.logs && this.devEnv) {
+            console.info('Output select event', event);
+          }
+          this.uploadOutput.emit(event);
+        }
       })
     );
 
     if (this.uploadInput instanceof EventEmitter) {
+      if (this.options.logs && this.devEnv) {
+        console.info('Input select Init');
+      }
       this.subscriptions.push(this.uploadService.handleInputEvents(this.uploadInput));
     }
   }
@@ -88,10 +99,12 @@ export class NgxUploaderSelectDirective {
 
   fileListener = () => {
     // tslint:disable-next-line: no-console
-    console.info('file listener', this.element.files);
+    if (this.options.logs && this.devEnv) {
+      console.info('File changes', this.element.files);
+    }
     if (this.element.files) {
       // call service method to handle selected files
-      this.uploadService.handleSelectedFiles(this.element.files);
+      this.uploadService.handleSelectedFiles(this.element.files, 'SELECT');
     }
   }
 

diff --git a/projects/ngx-uploader-directive/src/lib/models/ngx-uploader-directive-models.ts b/projects/ngx-uploader-directive/src/lib/models/ngx-uploader-directive-models.ts
@@ -41,6 +41,7 @@ export interface ISelectedFile {
     fileIndex: number; // file index of selected files.
     name: string; // Name of file.
     type: string; // Type of file.
+    selectedEventType: 'DROP' | 'SELECT'; // Type of selection of file.
     progress?: IUploadProgress; // File upload Progress.
     nativeFile?: File; // Native File.
     formData?: FormData; // Form data to upload with file.
@@ -73,10 +74,9 @@ export interface IUploadInput {
     id?: string; // Input id of file to upload.
     fieldName?: string; // Input field name.
     fileIndex?: number; // Input file index to upload.
-    file?: ISelectedFile; // Input selected file.
+    file?: ISelectedFile; // Input array selected file.
     formData?: FormData; // Input form data to pass with file.
     headers?: { [key: string]: string }; // Input headers to pass with upload request.
-    withHeaders?: boolean; // Input upload with credentials.
 }
 
 /**
@@ -86,7 +86,8 @@ export interface IUploadOutput {
     type: 'init' | 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver'
     | 'dragOut' | 'drop' | 'removed' | 'removedAll' | 'rejected' | 'error'; // Output events.
     id?: string; // id of selected file.
-    file?: ISelectedFile; // selected file.
+    file?: ISelectedFile; // array selected file.
+    fileSelectedEventType?: 'DROP' | 'SELECT' | 'ALL'; // Type of selection of file.
     progress?: IUploadProgress; // Progress
     response?: any; // File upload api response.
 }