How to restrict Base64 image upload in Angular RichTextEditor?

When implementing a Angular RichTextEditor that allows image uploads, it’s often necessary to restrict the size of the images to prevent excessive bandwidth usage or storage space consumption. This article will guide you through the process of restricting image upload by checking its size when using Base64 images in a RichTextEditor.

Implementation

To achieve this, you can utilize the actionBegin event of the RichTextEditor. Below is a code snippet that demonstrates how to set up the RichTextEditor and the corresponding function to restrict the image upload based on its size.

<ejs-richtexteditor
    id="defaultRTE"
    [insertImageSettings]="insertImageSettings"
    (actionBegin)="actionBegin($event)"
>
</ejs-richtexteditor>

In your TypeScript component, define the insertImageSettings and the actionBegin function as follows:

public insertImageSettings = {
  saveFormat: 'Base64',
};

public actionBegin(args) {
  if (
    args.requestType == 'Image' &&
    this.rteObj.insertImageSettings.saveFormat == 'Base64'
  ) {
    const base64Body = args.itemCollection.url.split(',')[1];

    // Decode the base64 string to get the binary data
    const binaryString = atob(base64Body);
    // restrict image uploading when it exceeds 1 MB
    if (binaryString.length > 1000000) {
      args.cancel = true;
    }
  }
}

Explanation

• The insertImageSettings object is configured to save images in Base64 format.
• The actionBegin function is triggered before any action is taken in the RichTextEditor.
• When an image is being inserted (args.requestType == 'Image'), the function checks if the image is in Base64 format.
• The Base64 encoded string is split to remove the data URL prefix and isolate the Base64 data.
• The Base64 string is then decoded into a binary string using the atob function.
• The length of the binary string represents the size of the image in bytes. If this size exceeds the specified limit (1 MB in this case), the args.cancel property is set to true to prevent the image from being uploaded.

Additional References

• RichTextEditor Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started

By following the steps outlined in this article, you can effectively control the size of images uploaded to your RichTextEditor, ensuring that they meet your application’s requirements for size constraints.

Conclusion

I hope you enjoyed learning how to restrict Base64 image upload in Angular RichTextEditor.

You can refer to our Angular RichTextEditor feature tour page to learn about its other features and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular RichTextEditor example to understand how to create and visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct Trac, or feedback portal. We are always happy to assist you!