cannot retrieve image when imageSaveOption is set to base64

[Zisis]

I am trying to setup a page using Blazor Server Side where the user can post a reply and upload a photo in the rich text editor field and then i want to take that and save it as base64. I have followed every step, tutorial and instructions i have found, i tried on a new blazor project with nothing else but the default things inside and yet i have the following problem. 

When the base64 imagesave option is selected, after the imaging is inserted/uploaded into the RichTextEditor field, the page disconnects for a brief moment and then reconnects back.

As a result of this, when i try to grab the value of the content by using the @ref.value property, the image content is missing and only the written information is gathered. If i use the blob imagesave however there are no issues. 

[Vinothkumar Yuvaraj]

Hi Zisis,

Greetings from Syncfusion support.

We have some limitations when using Base64 images. In RichTextEditor, you can use Base64 for small-sized images. If we wish to upload large-sized images, the browser will hang while loading the Base64 string. So, Rich Text Editor takes some delay when update base64 string into Rich Text Editor.

Note: This is the behaviour of a base64 image in a web browser. 

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

https://stackoverflow.com/a/13018239 

By default, images are saved in blob format in SfRichTextEditor. The blob format images are removed when you save the images into a database. So, we suggest you save the images in your application and use the same images to save the database using the SaveUrl and Path properties of the RichTextEditorImageSettings property.

The SaveUrl represents the URL to an action result method to save the image, and the Path represents the destination folder in which the image must be saved.

Index.razor

 

<SfRichTextEditor @bind-Value=@HtmlString>

    <RichTextEditorImageSettings SaveUrl=/api/SampleData/SaveImagePath=/Images//>

</SfRichTextEditor>

SampleDataController.cs

 

        [HttpPost("[action]")]

        [Route("api/Image/SaveImage")]

        public void SaveImage(IList<IFormFile> UploadFiles)

        {

            try

            {

                foreach (var file in UploadFiles)

                {

 

                    if (UploadFiles != null)

                    {

                        string targetPath = environment.ContentRootPath + \\wwwroot\\Images;

                        string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');

 

                        // Create a new directory, if it does not exists

                        if (!Directory.Exists(targetPath))

                        {

Directory.CreateDirectory(targetPath);

                        }

 

                        // Name which is used to save the image

filename = targetPath + $@"\{filename}";

 

                        if (!System.IO.File.Exists(filename))

                        {

// Upload a image, if the same file name does not exist in the directory

using (FileStream fs = System.IO.File.Create(filename))

{

file.CopyTo(fs);

fs.Flush();

                            }

Response.StatusCode = 200;

                        }

                        else

                        {

Response.StatusCode = 204;

                        }

                    }

                }

            }

            catch (Exception e)

            {

Response.Clear();

                Response.ContentType = "application/json; charset=utf-8";

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;

            }

        }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Upload_App-1446538279

Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/image#server-side-action

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_SaveUrl

Regards,

Vinothkumar

[Zisis]

I understand. Is it possible to grab the files directly from the blazor page instead of using a controller? Currently i use the following code to grab attachments using SfUploader 

 private void OnChange(UploadChangeEventArgs args)

    {

        foreach (var file in args.Files)

        {

            string base64 = Convert.ToBase64String(file.Stream.GetBuffer());

            file.Stream.Close();

        }

    }

Is there a similar way to do the same for the blob without going through a controller?

[Vinitha Jeyakumar]

Hi Zisis,

If you want to store the uploaded images as Base64, you can use our SaveFormat property, where you can define the type(Base64 or Blob) for the image to get uploaded.

And your reported issue of "page disconnects for a brief moment and then reconnects back" is happened due to higher buffer size, when loading the base64 images in RichTextEditor. This seems limitation with blazor, in order to resolve it you can manually set the buffer size in the startup.cs file of your project. We have also prepared a sample for your reference.

Code snippet:

services.AddSignalR(e => { e.MaximumReceiveMessageSize = 102400000; }); 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Upload_App-1446538279-1650575110

Regards,

Vinitha