I am using two Angular(2+) tools: ng2-file-upload and angular2-img-cropper.

I am trying to use ng2-file-upload's Dropzone to load an image in angular2-img-cropper's cropping tool. I actually can load the selected image in the crop tool it if I change the Input File (HTMLElement), but it fails with the drag-drop zone.

Here is how I can do it with the input:

HTML:

TS:

fileChangeListener($event : any, cropperComp: ImageCropperComponent) {

    this.cropper = cropperComp;

    let image = 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);

}

As I said, this works well.

However, when I try to use the Dropzone I get this error:

ERROR TypeError: Cannot read property 'files' of undefined [...] at ProfileComponent.fileChangeListener

HTML (dropzone):

                    Base drop zone