How to upload multiple images in the RichTextEditor using Uploader component?

Integrating multiple image uploads within a Rich Text Editor can enhance the content creation experience. This functionality can be achieved by combining the Uploader component with a custom toolbar in the Editor. The following guide provides a step-by-step approach to implement this feature using Blazor’s Syncfusion library.

Prerequisites

Ensure you have the following prerequisites in your development environment:

.NET Core SDK
Blazor Syncfusion library
A configured Blazor project

Step 1: Set Up the Rich Text Editor

In your Index.razor file, define the RichTextEditor component and include a custom toolbar item for triggering the upload dialog.

<SfRichTextEditor @ref="rteObj">
    <RichTextEditorToolbarSettings Items="@Tools">
        <RichTextEditorCustomToolbarItems>
            <RichTextEditorCustomToolbarItem Name="Upload">
                <Template>
                    <SfButton class="e-tbar-btn" @onclick="ClickHandler">
                        <div class="e-tbar-btn-text" style="font-weight: 500;">Multiple Upload</div>
                    </SfButton>
                </Template>
            </RichTextEditorCustomToolbarItem>
        </RichTextEditorCustomToolbarItems>
    </RichTextEditorToolbarSettings>
</SfRichTextEditor>

Step 2: Configure the Uploader Dialog

Below in the Rich Text Editor, add the Dialog component that contains the Uploader. This will allow users to select and upload multiple images.

<div>
    <SfDialog @bind-Visible="@dialogVisible" ZIndex="1000" ShowCloseIcon="false" IsModal="true" Width="45%" Target="#rteSection">
        <DialogTemplates>
            <Header>Upload Images</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>

Step 3: Implement the Success Event Handler

In the @code block, define the OnSuccess method to insert the uploaded image into the Editor using the ExecuteCommandAsync method.

@code{
    SfRichTextEditor rteObj;
    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;
    }
}

Step 4: Handle File Saving on the Server

In your HomeController.cs, implement the Save method to store the uploaded files in the server’s file system.

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;
     }
}

Additional References

For more detailed information on the components and methods used in this guide, refer to the following documentation:

By following these steps, you can successfully integrate a multiple image upload feature into your Rich Text Editor using Blazor’s Syncfusion library.

Conclusion

I hope you enjoyed learning how to refresh the SfRichTextEditor inside a grid edit dialog.

You can refer to our Blazor Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Rich Text Editor example to understand how to create and manipulate 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 comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)