We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Check size of pasted or locally selected image


I need to check the size of images pasted or selected by using the 'image' toolbar button of the Rich Text Editor.

I found a thread here: https://www.syncfusion.com/forums/177566/is-there-a-way-to-control-limit-the-size-of-an-image-file but it didn't work for me. 

For some reason, the imageUploading event handler I added in the control creation statement is never called, and I suspect that the event is raised only when uploading image to a server (maybe I'm wrong).

In my code, I don't upload images to the server, but make them 'inline' with base64 encoding, and after the user 'saves' the form, the HTML contents of the editor are uploaded as a whole to the backend.

This is the code that creates the editor:

var _t = this;
// ...
_t._rtEditor = new ej.richtexteditor.RichTextEditor({
imageUploading: function (e) { // THIS IS NEVER CALLED!
if (e.fileData.size > 80000) {
e.cancel = true;
showToast("Image too big");
height: '100%',
enableFloating: false,
toolbarSettings: {
type: 'MultiRow',
items: [
'Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent',
'CreateTable', 'CreateLink', 'Image', '|', 'ClearFormat',
'|', 'SourceCode', '|', 'Undo', 'Redo'
showCharCount: true,
maxLength: 5000
_t._rtEditor.insertImageSettings.saveFormat = 'Base64';

Is there a way to prevent a user from pasting/selecting images that are bigger than certain size, before they make their way into the text area of the editor?

Thank you!

3 Replies

VJ Vinitha Jeyakumar Syncfusion Team February 27, 2023 02:44 PM UTC

Hi Alejandro,

Your requirement to check the size of the uploaded and pasted image into the RichTextEditor can be achieved by using the imageSelected and actionBegin event. please check the code and sample below,

Code snippet:
let defaultRTERichTextEditor = new RichTextEditor({
  imageSelected: imageSelected,
  actionBegin: actionBegin,

function imageSelected(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');

function actionBegin(args) {
  if (
    args.requestType == 'Paste' &&
  ) {
    var sizeInBytes = args.originalEvent.clipboardData.files[0].size;
    let imgSize = 100000;
    if (imgSize < sizeInBytes) {
      args.cancel = true;
      alert('Please insert the image with size below 100KB');


AL Alejandro March 7, 2023 12:54 PM UTC

Hello Vinitha,

I've tested both events (imageSelected and actionBegin) and can confirm that they are what I was looking for.

Thank you so much for your support, have a nice day!



VJ Vinitha Jeyakumar Syncfusion Team March 8, 2023 04:46 AM UTC

Hi Alejandro,

We are glad to assist you.


Live Chat Icon For mobile
Up arrow icon