insertImage causes the page to be unresponsive

Hi. I'm currently working with DocumentEditor. I have made a drag and drop functionality for images and strings. I am encountering an issue as per the title says. I find it weird since it only happens when I use my drop event. Certain images do not cause this issue. Regular image uploading using the toolbar works as intended.

Code used is show below:

let path = e.dataTransfer.files[0];
let reader = new FileReader();
reader.onload = function (frEvent) {
let base64String = frEvent.target.result;
let image = document.createElement('img');
image.addEventListener('load', function () {
documenteditor.documentEditor.editor.insertImageAsync(base64String, this.width, this.height);
})
image.src = base64String;
};
reader.readAsDataURL(path);

2 Replies

GS Gayathri Swetha Magesh Syncfusion Team January 18, 2024 05:18 PM UTC

Hi,

We are currently looking on this to reproduce and will update you with further details on the reported issue By Jan 19, 2024.



GS Gayathri Swetha Magesh Syncfusion Team January 19, 2024 12:20 PM UTC

Hi,

Based on the information and code you provided, we have preapred the sample and tested the drag and drop functionality for images without encountering any errors or exceptions. We have included a video demonstration and the sample for your reference. If you have any specific code modifications or use cases, kindly please modify  the sample or provide your own sample and video demonstration for further validation.

Sample : https://stackblitz.com/edit/c7mjpj-ojdcuk?file=src%2FApp.vue%3AL186

Regards,
Gayathri Swetha


Attachment: ImageDrop_13ce5c83.zip

Loader.
Up arrow icon