Image thumbnail not rendering the first time

[Peter Terkildsen]

I created a new Blazor Rich Text Editor component. In here I added a custom dialog to insert an image. It works fine when inserting images that were previously uploaded, but not when I upload a new image. In this case, the image thumbnail needs to be generated first and this can take a while. This means that the RTE just renders a broken image. It doesn't update when the thumbnail has been generated and it doesn't wait until the image is generated. How can I make sure that the editor will render the image when the image is done?

I can see that the image thumbnail will be requested when I reload the rich text editor and the thumbnail has been generated.

[Vinitha Jeyakumar]

Hi Peter Terkildsen,

We suspect that you are trying to use custom image upload dialog to upload images into the RichTextEditor. so we have prepared a sample as per your requirement, by using the custom toolbar button and uploader control.  In the success event of the Uploader, we have inserted the uploaded image into the Editor using ExecuteCommand. Please check the code and attached sample below,

Code snippet:

Index.razor

<SfRichTextEditor @ref="rteObj">

    <RichTextEditorToolbarSettings Items="@Tools">

        <RichTextEditorCustomToolbarItems>

            <RichTextEditorCustomToolbarItem Name="Symbol">

                <Template>

                    <SfButton class="e-tbar-btn" @onclick="ClickHandler">

                        <div class="e-tbar-btn-text" style="font-weight: 500;"> Image Upload</div>

                    </SfButton>

                </Template>

            </RichTextEditorCustomToolbarItem>

        </RichTextEditorCustomToolbarItems>

    </RichTextEditorToolbarSettings>

</SfRichTextEditor>

<div>

    <SfDialog @bind-Visible="@dialogVisible" ZIndex="1000" ShowCloseIcon="false" IsModal="true" Width="45%" Target="#rteSection">

        <DialogTemplates>

            <Header> Custom Image Upload </Header>

            <Content>

                <SfUploader ID="UploadFiles" AllowedExtensions=".png, .jpeg, .jpg">

                <UploaderAsyncSettings SaveUrl="api/Home/Save"></UploaderAsyncSettings>

                <UploaderEvents Success="onSuccess"></UploaderEvents>

            </SfUploader>

            </Content>

        </DialogTemplates>       

        <DialogEvents OnOverlayModalClick="DialogOverlay" />

    </SfDialog>

</div>

@code{

    SfRichTextEditor rteObj;

    int currentIndex { get; set; } = -1;

    string activeClass = "e-active";

    private bool dialogVisible { get; set; }

    public void onSuccess(SuccessEventArgs args)

    {

        var hostingPath = NavigationManager.BaseUri;

        this.rteObj.ExecuteCommandAsync(CommandName.InsertImage, new ImageCommandsArgs()

            {

                Url = hostingPath + "Images/" + args.File.Name,

                CssClass = "rte - img"

            });

        this.dialogVisible = false;

    }

}

HomeController.cs

 public void Save(IList<IFormFile> UploadFiles)

 {

     try

     {

         foreach (var file in UploadFiles)

         {

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

             filename = hostingEnv.ContentRootPath + "\\wwwroot\\Images" + $@"\{file.FileName}";

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

             {

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

                 {

                     file.CopyTo(fs);

                     fs.Flush();

                 }

             }

         }

     }

     catch (Exception e)

     {

         Response.Clear();

         Response.StatusCode = 204;

         Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";

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

     }

 }

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success

Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/exec-command

Regards,

Vinitha

Attachment: RichTextEditor__save_(3)_94a78a94.zip

[Peter Terkildsen]

Hi Vinita,

Thanks for your reply.

I discovered that I made a bug in my upload-funktion :-( Sorry to disturb you with this.

Regards,

Peter

[Vinitha Jeyakumar]

Hi Peter Terkildsen,

You are welcome.

Regards,

Vinitha