Resize image on upload

[Richard Craig]

Does anyone know of a way to resize images that are added to the richtexteditor, either by the Insert Image dialog, or direct drag-drop to the editor? With the various events like imageSelected, etc we get details of the image size, but can we manipulate the actual image?

We want to stop users adding very large images and resize them e.g. to 1920 wide if they're over that size. I don't mean just to display a large image 1920 pixels wide, we want to reduce the filesize.

We're storing the images as base64 within the text.

[Bhuvaneshwari Thirunavukarasu]

Hi Grant Symon,

Thank you for reaching out.

By default, the Rich Text Editor validates the file size and displays a message if the uploaded image exceeds the maximum limit. However, resizing the image before uploading needs to be handled externally.

To assist with this, we have provided a sample that integrates an image editor as a custom toolbar option within the Rich Text Editor. This allows users to upload an image, resize it, and then insert the modified version into the editor.

Sample Link: Bg5h7keb (forked) - StackBlitz

Screenshot Reference:

You can explore this approach and customize it further based on your requirements. Let us know if you need any assistance!

Thanks,

Bhuvaneshwari T