Image is not updated in the Cropper only when i uses Drag and Drop functionality

[DhakshinaMoorthi-Techee]

Hi Team,

i have tried uploading the image using both File selection and Drag and drop method -> the issue is imageChangedEvent only accepts the Events from (change) event from html Input file type not from Drag and drop (DropEvent)

Here i have attached my code for your reference,

HTML code

<image-cropper class="img-cropper" [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="aspectRatio" [aspectRatio]="4 / 4" [resizeToWidth]="256" format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()" [(transform)]="transform"> </image-cropper>

Drag and Drop html Code

<div class="upload-box" (drop)="onDrop($event)" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)"> <a href="javascript:void(0)" class="add-link"> <img src="/assets/image/fileupload1.svg" alt="image" class="image" /> <h5 class="title-3">Drag and drop files here or <span (click)="selectFile($event)">browse</span></h5> <input #fileInputMultiple type="file" style="display: none;" accept="image/*, video/*" (change)="onFileSelected($event)" /> </a> </div>

Drop Event Code

onDrop(event: any) { this.onFileSelected(event); event.preventDefault(); }

File Change handling Code

onFileSelected(event: any): any { this.uploadfileName = event?.dataTransfer?.files[0]?.name ? event.dataTransfer.files[0].name : event?.target?.files[0].name; let file = event?.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0]; this.imageChangedEvent = event; this.copper = true; this.uploadFile = file; if (file) { this.enable = true; const reader = new FileReader(); reader.readAsDataURL(this.uploadFile); reader.onload = (event) => { this.imageUrl = event.target?.result as string; }; } else { this.imageUrl = ''; } }

OutPut with File selection method UI

OutPut with Drag and Drop method UI

[Mawi137]

Hi

In the docs you'll find that there are multiple ways to pass an image to the cropper. imageFile will probably suit your use-case better than imageChangedEvent.

[Niedes]

I have the same problem. After upgrading to the latest version of ngx-image-cropper I had to call this.imageChangedEvent = event; to make the uploaded image appear when using a classic html input of type "file" because calling e.g. this.imageCropper.imageBase64 = 'base64stringhere...' has no effect anymore. This is also true for the latest 6.x.x version, I didn't try older versions. This doesn't work when using a drag and drop function (ngx-file-drop in my case).