file-drop-snippet.ts

  dragOver = false;
  fileDropped(file: File) {
    const reader = new FileReader();
    reader.onload = (event: ProgressEvent) => {
      const json = reader.result as string;
      this.rulesets = JSON.parse(json) as Ruleset[];
    };
    //reader.onerror... 
    reader.readAsText(file);
  }
  @HostListener('dragover', ['$event']) public onDragOver(event) {
    event.preventDefault();
    event.stopPropagation();
    this.dragOver = true;
  }
  @HostListener('dragleave', ['$event']) public onDragLeave(event) {
    event.preventDefault();
    event.stopPropagation();
    this.dragOver = false;
  }
  @HostListener('drop', ['$event']) public onDrop(event) {
    event.preventDefault();
    event.stopPropagation();
    this.dragOver = false;

    const files = event.dataTransfer.files;
    if (files.length === 1) {
      this.fileDropped(files.item(0));
    } else {
      throw new Error('Only one file is sipported at a time.');
    }
  }