Angular2 Error when using angular2-img-cropper in Visual Studio Type FileReader is not assignable to type FileReader

Question

I just tried to explore plugin angular2-img-cropper (https://github.com/cstefanache/angular2-img-cropper) and added some of the sample code from the plunker https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/ to my app.

But when I try to compile my app in Visual Studio 2015, its giving below error:

Type FileReader is not assignable to type FileReader. Property onloadend is missing in type FileReader

The actual error is in the below piece of code from above plunker:

fileChangeListener($event) {
        var image:any = new Image();
        var file:File = $event.target.files[0];
        var myReader:FileReader = new FileReader();
        var that = this;
        myReader.onloadend = function (loadEvent:any) {
            image.src = loadEvent.target.result;
            that.cropper.setImage(image);

        };

        myReader.readAsDataURL(file);
    }

Can anyone please guide?

Answer 1

The solution is to replace with event listener:

fileReader.addEventListener('loadend', function(loadEvent:any){
    image.src = loadEvent.target.result;
    that.setImage(image);
});