angular drag and drop file directive #2

d2.ts

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appAsFileDrop]'
})
export class AsFileDropDirective {
  private element: HTMLElement;
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    this.element = elementRef.nativeElement;
  }

  @HostListener('drop', ['$event'])
  public onDrop(event: any): any {
    const files = event.dataTransfer.files;

    if (!files || files.length === 0) {
      return;
    }

    const imgElement = this.renderer.createElement('img');
    imgElement.file = files[0];
    this.renderer.appendChild(this.element, imgElement);

    const fileReader = new FileReader();
    fileReader.onload = (ev) => {
      imgElement.src = ev.target.result;
    };
    fileReader.readAsDataURL(files[0]);
  }

}