Validate image size in Rich Text Editor when saving as Base 64

[Andrew Cook]

I need to store some small images as Base64 in a document created using the Rich Text Editor.

I'm using the ActionComplete event handler to retrieve the blob, convert to Base64 and store as the SRC of my element, so the basic functionality is working correctly.

But I also need to validate the size of the image to prevent the browser crashing or unwieldy size of the final document.

I can't use the ImageUploading event because this is not invoked when I'm not uploading the image to the server as a separate action.

The ImageSelected event does not seem to be reliable. 

If I select a 9MB file using the toolbar, I can see the event fire and get cancelled, the file does not show in the file selector dialog, but when I click the Insert button the image appears in the RTE and then my Chrome session is unresponsive presumably because of the memory consumption. It seems that the cancel argument in the event is not completely cancelling the image selection.

If I drag and drop a 9MB file into the RTE, the image appears and Chrome session stops working again. It seems that the ImageSelected event did not fire at all.

How can I validate the size of an image that I'm going to be managing as Base64?

How can I explain what the problem is to the user when they try to upload a large file? Is it possible to customise the error message in the Insert Image dialog?

Thanks in advance

Andrew

[Revanth Krishnan]

Hi Adrew, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your queries, 

 

Query 1: “When the imageSelected event is used to restrict the image insertion, the args.cancel doesn’t cancel the image selection as the insert button click insert the image in to the Rich Text Editor” 

 

We have further validated on the reported query and have considered “Image inserted button is enabled even after restricting the image using the `imageSelected` event” as a bug from our end and logged the report for the same, the fix will be included with our patch release on the 5^th of January.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/20599 

 

Query 2: When drag and drop the image, the `imageSelected` event  is not triggered at all to check the image size. 

 

We have validated on the reported query and have considered “Provide event to restrict the image insertion when drag and drop` event” as a bug from our end and logged the report for the same, the fix will be included with our patch release on the 5^th of January.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/20600 

 

Query 3: How can I explain what the problem is to the user when they try to upload a large file? Is it possible to customize the error message in the Insert Image dialog? 

 

The error message can be displayed using the alert when the image is restricted using the `args.cancel` in the `imageSelected` event. We have prepared a sample for you reference, 

 

Code Snippet: 

function onImageSelect(args) { 

        let imgSize = 100000; 

        let sizeInBytes = args.filesData[0].size; 

        if (imgSize < sizeInBytes) { 

            args.cancel = true; 

            alert("Please insert the image with size below 100KB"); 

        } 

    } 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/160594/ze/RTE_Image_Size-1669877969 

 

Please check the above code snippet and sample and let us know if it resolves your issue. 

 

Regards, 

Revanth 

[Revanth Krishnan]

Hi Andrew, 

 

 

Thanks for your patience,    

 

We have resolved both the reported issues “Provide event to restrict the image insertion when drag and drop` event” and “Image inserted button is enabled even after restricting the image using the `imageSelected` event” with the package version 18.4.34.  

 

Can you please upgrade the package version to 18.4.34 to resolve the issue?  

   

Regards,   

Revanth 

[Sabitha Rajamani]

From: Andrew Cook
Sent: Wednesday, January 27, 2021 4:21 AM
To: Syncfusion Support
Subject: RE: Syncfusion support community forum 160594, Validate image size in Rich Text Editor when saving as Base 64, has been updated. 

  

 

Ok thanks Revanth, I will upgrade and test it out. 

[Revanth Krishnan]

Hi Andrew, 

 

We will wait for your update. 

 

Please let us know if you need further assistance. 

 

Regards, 

Revanth