Angular CDK Question

[John Gregory]

I'm in the process of porting our angular 1.3 application to angular 9. One of the features we allow users to do is either select a set of files using a file chooser, or drag & drop a set of files in an area for processing. This needs to carry forward, and after watching the angular cdk tutorial here youtube cdk I was able to get this "somewhat" working. By this I mean, the file chooser option works wonderfully. The drag & drop option, works like my son - not very reliant!  Occasionally, I can get the files to drop in the file input area, however, most times, they end up opening tabs on my browser.  Below is the code from the html portion of the page:

      <div class="card text-left">

        <div class="card-header badge-primary">

          <h5 class="card-title">Add Data Files</h5>

        </div>

        <div class="card-body">

          <div cdkDropList (cdkDropListDropped)="dropDataFiles($event)">

            <div cdkDrag class="list-group drop-box">

              <div class="list-group-item drop-box h-100">

                <input type="file" class="form-control overlay-input h100" (change)="addDataFiles($event)" value="dataFiles" multiple>

                <input type="text" class="form-control drop-zone h100 text-center" value="Click/Drag & Drop Files Here"

                  readonly>

              </div>

              <div class="scrollable vh-25">

                <p class="list-group-item text-center" [hidden]="hasDataFiles"><i>No Files Selected</i></p>

                <a class="list-group-item" *ngFor="let afile of dataFiles; let i = index" [hidden]="!hasDataFiles">

                  {{afile.name}}

                  <span (click)="removeDataFile(i)" class="badge clickable">

                    <i class="fa fa-times" aria-hidden="true"></i>

                  </span>

                </a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

And, here is a snippet from my component class...

 addDataFiles($event) {

    if ($event.target.files.length > 0) {

      for (let index = 0; index < $event.target.files.length; index++) {

        this.dataFiles.push($event.target.files[index]);

        console.log('added data file:  ' + this.dataFiles[index].name);

      }

    }

    this.updateDisplay();

    console.log('completed adding ' + $event.target.files.length + ' files to datafiles array');

  }

  dropDataFiles($event: CdkDragDrop<File[]>) {

    console.log('have cdk drag/drop event!');

    console.log($event);

    // addDataFiles($event);  //i've tried commenting and uncommenting this line, but never see the above 2 lines in console log area.

  }

So, after watching the video, i have a couple questions. First, in the video, in the cdkDropList area, he attaches an event listener which moves the stuff around in the array. and you can see it going in his method.  however, in my component class, i have two files for events - dropDataFiles($event) and addDataFiles($event) when am able to drop & drag, I don't see the console log note being print in the dropDataFiles() method... it seems to only pick up the addDataFiles() listener. Am I missing something?  I'm fairly new to angular, so that's a close given.  

Appreciate any help someone can provide!

Thanks,

JG

[john leo]

Hi,

I am looking for work. I am software developer, with over 10+ years of experience in software development.

I have good expertise on the following technologies.

ASP.NET, C#, ASP.NET Core, Classic ASP
Angular 2, 6 and 8NodeJS
Angular Material
SQL Server, SSIS, SSRS and MySQL
SharePoint 2010 to 2016
Office 365 and SharePoint Online &
PHP

I am looking for a regular work. I am open for a fixed monthly rate.  I am live and work from India.

regards
John