1. Home
  2. Forum
  3. Blazor
  4. Cannot save/retrieve image on RichTextEditor file

Cannot save/retrieve image on RichTextEditor file

AspNetCore 5.0  Syncfusion.Blazor 19.1.0.63

I followed the sample code in the related links to save images inside RichTextEditor but in my case I was expecting to see the image in the page once it is inserted but  only get a small generic glyph and the name of the picture file and not the picture itself.  The image is saved on the assigned folder but it does not show when loading the file  again

// Page
@using Syncfusion.Blazor.RichTextEditor;

<div style="padding-bottom:10px;">
    <SfButton @onclick="SaveFileChanges">Save</SfButton>
</div>

<SfRichTextEditor  @bind-Value="@Value" >
    <RichTextEditorQuickToolbarSettings Image="@Image" Link="@Link" />
    <RichTextEditorImageSettings SaveUrl="api/Image/Save" Path="@Path" AllowedTypes="@allowedTypes" SaveFormat="SaveFormat.Base64" />
    <RichTextEditorToolbarSettings Items="@Tools">
    </RichTextEditorToolbarSettings>
</SfRichTextEditor>

@code{
    string Path = $"\\wwwroot\\Client\\Documents\\English\\";
    private string Value { get; set; } = "<p>Syncfusion RichTextEditor</p>";
    private List<string> allowedTypes = new List<string>() { ".jpg", ".jpeg", ".gif", ".png" };

    private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
      //  new ToolbarItemModel() { Name = "SaveChanges", TooltipText = Resources.SaveChanges },
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
        new ToolbarItemModel() { Command = ToolbarCommand.FontName },
        new ToolbarItemModel() { Command = ToolbarCommand.FontSize },
        new ToolbarItemModel() { Command = ToolbarCommand.FontColor },
        new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor },
        new ToolbarItemModel() { Command = ToolbarCommand.LowerCase },
        new ToolbarItemModel() { Command = ToolbarCommand.UpperCase },
        new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
        new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Outdent },
        new ToolbarItemModel() { Command = ToolbarCommand.Indent },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
        new ToolbarItemModel() { Command = ToolbarCommand.Print },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };

    private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()
{
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.HorizontalSeparator },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },
    new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }
};

    private List<LinkToolbarItemModel> Link = new List<LinkToolbarItemModel>()
{
    new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open },
    new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit },
    new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink }
};


    private void SaveFileChanges()
    {
         // code to save file. It works
    }
}

// Controller

    [ApiController]
    public class ImageController : ControllerBase
    {
        private readonly IWebHostEnvironment hostingEnv;

        public ImageController(IWebHostEnvironment env)
        {
            this.hostingEnv = env;
        }

        [HttpPost("[action]")]
        [Route("api/Image/Save")]
        public void Save(IList<IFormFile> UploadFiles)
        {
            try
            {
                foreach (var file in UploadFiles)
                {
                    if (UploadFiles != null)
                    {
                        string targetPath = hostingEnv.ContentRootPath + "\\wwwroot\\Client\\Documents\\English\\";
                        string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
  
                        // 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;
            }
        }
    }










3 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team May 19, 2021 09:58 AM UTC

Hi Ben, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “Cannot save/retrieve images on the Rich Text Editor”. 
 
We have analyzed the shared code snippet and we are able to reproduce the issue from our end and the issue occurred because the ‘Path’ property is not configured properly. This can be resolved by giving the correct path of the file stored in the ‘Path’ property. We have prepared a sample for your reference, 
 
Code Snippet: 
 
<SfRichTextEditor @bind-Value="@Value"> 
    <RichTextEditorQuickToolbarSettings Image="@Image" Link="@Link" /> 
    <RichTextEditorImageSettings SaveUrl="api/Image/Save" Path="@Path" AllowedTypes="@allowedTypes" SaveFormat="SaveFormat.Base64" /> 
    <RichTextEditorToolbarSettings Items="@Tools"> 
    </RichTextEditorToolbarSettings> 
</SfRichTextEditor> 
 
@code{ 
    //string Path = $\\wwwroot\\Client\\Documents\\English\\; 
    string Path = "./Client/Documents/English/"; 
    . . . 
} 
 
 
Please check the above code snippet and the sample and let us know if it resolves the issue. 
 
Regards, 
Revanth 


Marked as answer
BJ Ben Junior May 21, 2021 12:36 AM UTC

It is working perfect now. Thanks for the solution.

Cheers,
Ben Junior


RK Revanth Krishnan Syncfusion Team May 21, 2021 08:28 AM UTC

Hi Ben, 
 
Thanks for the update. 
 
We are glad that the provided solution resolved your issue. Please let us know if you need further assistance. 
 
Regards, 
Revanth 


Loader.
Up arrow icon