Selecting Images and Media in Rich Text Editor

[Andrew Sabin]

Hello SyncFusion Support Team,

I have been trying to find a way to set a string fileName variable to be set to the image that has been selected in the editor so that when the image has been removed from the editor it will be removed from the file folder or image server.

I've been trying to set the fileName variable to be equal to a selected file by using the SelectionChanged editor event. However, when I try to get the specific selected image to show up in the console with a console.WriteLine() command I get nothing to show up. Here is what I have so far:

Rich Text Editor:

<SfRichTextEditor @ref="rteObj" Placeholder="@Placeholder" @bind-Value="@Content" MaxLength="@MaxLength" ShowCharCount="true">    <RichTextEditorEvents SelectionChanged="onSelectionChange" ImageDelete="onImageDelete" BeforeUploadImage="onImageUploading" />    <RichTextEditorImageSettings SaveUrl="api/Image/Save" Path="[Image Sever URL]" RemoveUrl="api/Image/Remove"/>    <RichTextEditorToolbarSettings Items="@Tools" Type="ToolbarType.MultiRow" /></SfRichTextEditor>

Functions for Selecting and Deleting Images:

private void onImageUploading(ImageUploadingEventArgs args)
{
    fileName = args.FilesData[0].Name;
}


private void onSelectionChange(SelectionChangedEventArgs args)
{
    var contentSelected = args.SelectedContent;
    Console.WriteLine($"Selected content {contentSelected}");
}


private async Task onImageDelete(object args)
{
    await HttpClient.PostAsJsonAsync("api/Image/Remove", fileName);
}


[Vinitha Jeyakumar]

Hi Andrew Sabin,

Your requirement to remove the images explicitly from the server can be achieved by using the ImageDelete event. This event is triggered after an image is removed from the content and provides the src URL of the image, which can be used to initiate a request to your server for deleting the corresponding file. 

Code snippet:

Index.razor

 @using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>

   <RichTextEditorEvents ImageDelete="@OnImageDeleteHandler"></RichTextEditorEvents>

   <RichTextEditorImageSettings SaveUrl="@SaveURL" Path="@Path" RemoveUrl="@RemoveURL"/>

</SfRichTextEditor>

@code{

    private string SaveURL = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/SaveFile";

    private string Path = "[SERVICE_HOSTED_PATH]/RichTextEditor/";

    private string RemoveURL = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/DeleteFile";

    public async Task OnImageDeleteHandler(AfterImageDeleteEventArgs args)

    {

        var imageSrc = args.Src;

        var fileName = imageSrc.Split('/').Last();

        var content = new MultipartFormDataContent();

        var dummyFile = new ByteArrayContent(new byte[0]);

        content.Add(dummyFile, "UploadFiles", fileName);

        try

        {

            var response = await Http.PostAsync(RemoveURL, content);

            if (response.IsSuccessStatusCode)

            {

                Console.WriteLine($"Image deleted successfully: {fileName}");

            }

            else

            {

                Console.WriteLine($"Image deletion failed: {response.StatusCode}");

            }

        }

        catch (Exception ex)

        {

            Console.WriteLine($"Error deleting image: {ex.Message}");

        }

    }

}

Controller:

 [HttpPost("[action]")]

[Route("api/Home/DeleteFile")]

public IActionResult DeleteFile(IList<IFormFile> UploadFiles)

{

    try

    {

        foreach (IFormFile uploadFile in UploadFiles)

        {

            string? fileName = ContentDispositionHeaderValue.Parse(uploadFile.ContentDisposition).FileName?.Trim('"');

            string filePath = Path.Combine(hostingEnv.WebRootPath, "Images/", fileName!);

            if (System.IO.File.Exists(filePath))

            {

                System.IO.File.Delete(filePath);

                return Ok($"File '{fileName}' has been deleted.");

            }

            else

            {

                // Return 404 status if file not found

                return NotFound($"File '{fileName}' not found.");

            }

        }

    }

    catch (Exception ex)

    {

        return StatusCode(500, $"An error occurred: {ex.Message}");

    }

    return StatusCode(500, $"No file processed.");

}

Please refer to the documentation below for more details.

https://blazor.syncfusion.com/documentation/rich-text-editor/tools/insert-image#delete-image

We have also attached a sample for your reference.

Regards,

Vinitha

Attachment: SyncfusionRTEserver_c1b720e5.zip