Incorporating both ng2-file-upload and angular2-img-cropper into my Angular(2+) project has brought about a unique challenge.
My goal is to utilize ng2-file-upload's Dropzone feature to load an image into angular2-img-cropper's cropping tool. While I am able to successfully load the selected image into the crop tool by changing the Input File (HTMLElement), I encounter issues when attempting to do so with the drag-drop zone.
Here is how I have managed to achieve it using the input file:
HTML:
<input type="file" id="file-name"
ng2FileSelect
[uploader]="uploader"
(change)="fileChangeListener($event, cropper)"/>
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);
}
This approach works without any issues.
However, when attempting to implement the Dropzone functionality, I encountered the following error:
ERROR TypeError: Cannot read property 'files' of undefined [...] at ProfileComponent.fileChangeListener
HTML (dropzone):
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="well my-drop-zone"
(onFileDrop)="fileChangeListener($event, cropper)"
>
Base drop zone
</div>