Check image size in Blazor RichTextEditor Component

13 Dec 20211 minute to read

By using the Rich text editor’s OnImageUploading 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, the image size has been validated before uploading and determined whether the image has been uploaded or not.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>
    <RichTextEditorImageSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" Path="./Images/" />
    <RichTextEditorEvents BeforeUploadImage="@BeforeUploadImage" />
</SfRichTextEditor>

@code {
    private void BeforeUploadImage(ImageUploadingEventArgs args)
    {
        var sizeInBytes = args.FilesData[0].Size;
        var imgSize = 500000;
        if (imgSize < sizeInBytes) {
            args.Cancel = true;
        }
    }
}