Multi upload files

[FilipeQ]

Bug: I have 2 ngFileDrop and ngFileSelect in the same html page, when I drop or browser a file for a specified component they will call all handlers from all components.

Version: 2.0.0

This bug don't exist at version 1.6

example code that works in version 1.6

html:

<div class="drag-file" ngFileDrop
                    [options]="optionsInvoiceFile"
                    (onUpload)="handleUploadInvoiced($event)"
                    [ngClass]="{'file-over': hasBaseDropZoneOverInvoiced}"
                    (onFileOver)="fileOverBaseInvoiced($event)">
                    <span class="drag-drop-span">Drag & drop</span>
                    <span>Your files here, or <label for="uploadInvoiced">
                        <input id="uploadInvoiced" type="file" style="display:none" ngFileSelect [options]="optionsInvoiceFile" (onUpload)="handleUploadInvoiced($event)" />browse.
                        </label>
                    </span>
                </div>

<div class="drag-file" ngFileDrop
                    [options]="optionsResourceCosts"
                    (onUpload)="handleUploadResourceCosts($event)"
                    [ngClass]="{'file-over': hasBaseDropZoneOverResourceCosts}"
                    (onFileOver)="fileOverBaseResourceCosts($event)">          
                    <span class="drag-drop-span">Drag & drop</span>
                    <span>Your files here, or <label for="uploadResourceCosts">
                        <input id="uploadResourceCosts" type="file" style="display:none" ngFileSelect [options]="optionsResourceCosts" (onUpload)="handleUploadResourceCosts($event)" />browse.
                        </label>
                    </span>
                </div>

component.ts:

handleUploadResourceCosts(data): void {
    console.log("handleUploadResourceCosts: data do upload.. ");
    this.hasBaseDropZoneOverResourceCosts = false;
    if (data && data.status === 200) {
      this.snackBar.open("Resources file uploaded with success.", "Close");
    }else if(data && data.status === 400){
      this.snackBar.open("You tried upload a invalid resources file.", "Close");
    }

  }

handleUploadInvoiced(data): void {
    console.log("handleUploadInvoiced: data do upload2.. ");
    if (data && data.status === 200) {
      this.snackBar.open("Invoiced file uploaded with success.", "Close");
    }else if(data && data.status === 400){
      this.snackBar.open("You tried upload a invalid invoiced file.", "Close");
    }
    this.hasBaseDropZoneOverInvoiced = false;
  }

With version 1.6 if i upload Invoice file they will call handleUploadInvoiced handler, it's ok.

With version 2.0 if i upload Invoice file they will call both handlers and options. So if i submit one file in the first component they will execute the last http option and make the wrong request.

[jkuri]

hi @FilipeQ. thanks for your report, I'll check on this.