Having trouble getting help?
Contact Support
Contact Support
File size in EJ2 JavaScript Rich text editor control
18 Apr 20234 minutes to read
By using the Rich text editor’s imageUploading
event, you can get the image size before uploading and restrict the image to upload, when the given image size is greater than the allowed size.
In the following, we have validated the image size before uploading and determined whether the image has been uploaded or not.
var editor = new ej.richtexteditor.RichTextEditor({
height: 400,
toolbarSettings: {
items: ['Undo', 'Redo', '|',
'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',
'SubScript', 'SuperScript', '|',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',
'Indent', 'Outdent', '|', 'Image', '|', 'SourceCode',
'|', 'ClearFormat', 'Print']
},
insertImageSettings: {
saveUrl: "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save",
path: "../Images/"
},
imageUploading: onImageUploading
});
editor.appendTo("#editor");
function onImageUploading(args) {
console.log("file is uploading");
var sizeInBytes = args.fileData.size;
var imgSize = 500000;
if (imgSize < sizeInBytes) {
args.cancel = true;
}
}
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div id="editor">
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>