ng2-file-upload and reading file contents

Question

All,

I am trying to read the contents of a file that is dragged and dropped using ng2-file-upload and cannot figure it out. I want to be able to take the data and drop it in a grid before uploading.

Here is my HTML code

<div ng2FileDrop
    [ngClass]="{'file-over': hasFileOver}"
    (fileOver)="fileOver($event)"
    (onFileDrop)="fileDrop($event)"
    [uploader]="uploader"
    class="well my-drop-zone">
    Drop zone
</div>

And here is my .ts code

public fileDrop(e: any):void {
  console.log("drop", e);
  this.hasFileOver = e;
}

public fileOver(e: any):void {
  console.log("over", e);
  console.log(this.uploader);
  this.hasFileOver = e;
}

I have been trying a bunch of different things and cannot figure out how to get the data.

Thx jonpfl

Answer 1

You can refer to this stackoverflow answer: https://stackoverflow.com/a/39644736/4337932

Here is what it says:

uploader: FileUploader = new FileUploader({}); //Empty options to avoid having a target URL
reader: FileReader = new FileReader();

ngOnInit() {
    this.reader.onload = (ev: any) => {
        console.log(ev.target.result);
    };
    this.uploader.onAfterAddingFile = (fileItem: any) => {
        this.reader.readAsText(fileItem._file);
    };
}