drag & drop not working in angular using fabric

i am trying to use fabric js for my image editor

drag and drop the image from loaded area to canvas.

Here is my HTML code

    <div class="panel panel-default panel-upload">
  <div class="panel-heading">Upload Picture</div>
  <div class="panel-body text-center">
    <img id="testImage" draggable="true"  class="images-item-upload" *ngFor='let url of urls' [src]="url?.url"  (click)="addImageOnCanvas(url.url);"/>
    <label class="btn btn-default btn-block file-container">
      <i class="fa fa-fw fa-upload"></i> Choose a file
      <input type='file' [disabled]="urls.length >= 16"  multiple (change)="readUrl($event);">
    </label>
  </div>
</div>

Here is my ts code

    addImageOnCanvas(urls): void {
    if (urls) {
        fabric.Image.fromURL(urls, (image) => {
            image.set({
                left: 10,
                top: 10,
                angle: 0,
                padding: 10,
                cornersize: 10,
                hasRotatingPoint: true,
                title: this.urlName
            });
            image.scaleToWidth(Math.round(this.size.width / 2));
            this.extend(image, this.randomId());
            this.canvas.add(image);
            this.selectItemAfterAdded(image);
        });

        this.updateLayers();
    }
}

when i am trying to drag and drop i am getting error

Cannot read property 'src' of undefined
at EditorComponent.push.xD4D.EditorComponent.handleDropOnCanvas (editor.component.ts:1036)

I was struggling for almost 1 day i am not getting exact solution

Team can some one please help me I am struggling since 2 days i am not getting proper solution

from drag & drop not working in angular using fabric