Check size of pasted or locally selected image

[Alejandro]

Hello!

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!
    alert("ok");
    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.appendTo('#rteEditorContainer');
_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!

[Vinitha Jeyakumar]

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 defaultRTE: RichTextEditor = new RichTextEditor({

  imageSelected: imageSelected,

  actionBegin: actionBegin,

});

defaultRTE.appendTo('#defaultRTE');

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' &&

    args.originalEvent.clipboardData.files[0]

  ) {

    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');

    }

  }

}

Sample: https://stackblitz.com/edit/e1v3hv?file=index.ts

API Link: https://ej2.syncfusion.com/documentation/api/rich-text-editor/#imageselected

https://ej2.syncfusion.com/documentation/api/rich-text-editor/#actionbegin

Regards,

Vinitha

[Alejandro]

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!

Regards

Alex

[Vinitha Jeyakumar]

Hi Alejandro,

We are glad to assist you.

Regards,

Vinitha