How to save images as base64 string

[Nils Steinle]

Hello,

we're saving the whole html-content/output of the RichtTextEditor as string in our sql database.

We want to add some Images to this content. We dont use a local filesystem (blob) for saving images.

Is there a way to convert the blob

<img src="blob:http://blazor.syncfusion.com/3ab56a6e-ec0d-490f-85a5-f0aeb0ad8879">

to

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==">




In this way, we can save the images together with the html content in our database as a string.

Is that possible? Can somebody tell me how?

I found this thread for mvc, is there a way to do that in blazor?

https://www.syncfusion.com/forums/143705/how-to-save-images-as-base64-string

Thanks,

Nils

[Gunasekar Kuppusamy]

Hi Nils,

Greetings from Syncfusion support.

We have validated your reported query "How to save images as base64 string" and we can achieve this requirement by configuring Base64 SaveFormat type in the RichTextEditorImageSettings property.

We have prepared a sample for your reference.

Code snippets:

<SfRichTextEditor @ref="rteObj">  

        <ChildContent>  

            ...  

            <RichTextEditorImageSettings SaveFormat="SaveFormat.Base64"></RichTextEditorImageSettings>  

        </ChildContent>  

    </SfRichTextEditor>  

Sample: https://www.syncfusion.com/downloads/support/forum/167147/ze/RichTextEditor_Base641957681365

Please check the sample and let us know if the solutions help,

Regards,

Gunasekar

[Nils Steinle]

That worked for me, thanks!!

[Gunasekar Kuppusamy]

Hi Nils,

 

 

We are glad that you have resolved the issue from your end. Please let us know if you need further assistance.   

  

Regards,  

Gunasekar

[Frank]

Is there support for multiple images in the same RichTextEditor? 

I tried it based on the example you provided and it does not seem to support more than one image in the RichTextEditor.

[Nils Steinle]

Hey Frank,

i handled that with a custom tool in the toolbar, based on the syncfusion custom toolbar example:

https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#custom-tool

instead of inserting an emote, i converted a image to a base64 string and inserted this in the text editor.

But maybe there is a out of the box solution,

let's see what the syncfusion team has to say about it :)

[Gunasekar Kuppusamy]

Hi Nils,

Currently we are validating you reported query from our end. We will update further details within two business days on or before 28^th September.

Regards,

Gunasekar

[Nils Steinle]

Hey Gunasekar,

i think u have to validating Frank's query, on my point its all fine :)

[Gunasekar Kuppusamy]

Hi Nils,

Thanks for the information. Yes, we are checking the Frank reported query.

Hi Frank,

We have validated your reported query from our end.

By current RichTextEditor behavior, you can insert the images into the RichTextEditor by following ways

• By using the Insert Image popup on RichTextEditor Toolbar.
• Drag and drop from file explorer.
• Copy and paste into the RichTextEditor.

Insert image popup and drag and drop , does not support to insert the multiple images at a time. So please confirm the following thing

• Which way you are used to inserting the images into the RichTextEditor.

Based on your details, we can validate it further and provide a solution at earliest.

Regards,

Gunasekar

[Philip]

As I'd feared, there's some kind of limit on the size of images that can be inserted into the RichTextEditor when the save format is specified as Base64. Trying to insert an image beyond a certain size causes the upload bar to stop at a certain point. Is this a browser memory issue, or something to do with a limit on the component? How can the limit(s) be raised programmatically?

[Gunasekar Kuppusamy]

Hi Philip,

Greetings from Syncfusion support.

We have validated your queries.

Query 1: Trying to insert an image beyond a certain size causes the upload bar to stop at a certain point. Is this a browser memory issue, or something to do with a limit on the component? 

By default behavior, RichTextEditor supports uploading images up to  30000000 Bytes. If the image size exceeds this size, then the images will not upload properly.

API: https://ej2.syncfusion.com/documentation/api/uploader/#maxfilesize

If you are still facing the issue within the size, please share the following details,  

• RichTextEditor code snippets, that you have used.
• Any runnable sample to reproduce the issue.
• Any video reference for issue reproducing case.
• The exact package version you are using.

  

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest.  

Query 2: How can the limit(s) be raised programmatically?
You can check the image size using the BeforeUploadImage event. Set args.cancel=true​​​​  if you need to prevent the image uploading. 

Please refer to the below documentation to check the image size. 

Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/check-image-size 

Please check the solution and let us know if you have any concerns. 

Regards, 

Gunasekar

[Philip]

Thanks, Gunasekar, that would explain it. Is there no way to raise the limit then?

Incidentally, I had to hunt this topic down again - surprisingly I don't see an obvious to see to see which posts I've commented on, or a way to get email notifications of replies. Is there a way?

I should add that I noticed another problem. When inserting an image, using the Browse to upload a file causes a mysterious crash. No clear exceptions thrown. Dragging/dropping doesn't do that.

[Gunasekar Kuppusamy]

Hi Philip, 

Currently, we are validating your reported issue. We will update the further details within two business days (2nd November).

Regards,

Gunasekar

[Pandiyaraj Muniyandi]

Hi Philip, 

 

Good day to you. 

 

Query 1: When inserting an image, using the Browse to upload a file causes a mysterious crash. No clear exceptions thrown. 

 

The base64 string image suitable for tiny images, if you’re trying to insert large size base64 string images, browser will take some time to process it. So base64 string value update into Rich Text Editor takes some delay.  

  

Note: This is the behavior of a base64 image in a web browser. Prepare base64 for tiny images. 

 

Reference links:
https://stackoverflow.com/a/11402374  

https://stackoverflow.com/a/13018239  

 

Query 2: Incidentally, I had to hunt this topic down again - surprisingly I don't see an obvious to see to see which posts I've commented on, or a way to get email notifications of replies. Is there a way? 

  

The subscribe button available at the top-right side of each forum thread. By subscribing the individual forum, you will receive notifications for replies on the thread. 

 

Let me know, if you have any other concerns. 

 

Regards, 

Pandiyaraj