Issues with Sending Headers After Uploading Images in Rich Text Editor

[Andrew Sabin]

Hello Again Syncfusion Support Team,

Thank you again for your help in regards to my previous questions.

As of right now I have been trying to send over headers/formats over to my Backend Image Controller after uploading an image:

<SfRichTextEditor @ref="rteObj" Placeholder="@Placeholder" @bind-Value="@Content" MaxLength="@MaxLength" ShowCharCount="true">
    <RichTextEditorQuickToolbarSettings Image="@Image" />
    <RichTextEditorEvents BeforeUploadImage="@OnBeforeUploadImage"/>
    <RichTextEditorImageSettings SaveUrl="@saveUrl" Path="@saveDirectory" RemoveUrl="@removeUrl" />
</SfRichTextEditor>

public void OnBeforeUploadImage(ImageUploadingEventArgs args)
{
    args.CurrentRequest = new List<object> { new { Authorization = "" } };
    args.CustomFormData = new List<object>
    {
        new KeyValuePair<string, string>("containerName", ContainerName ?? string.Empty),
        new KeyValuePair<string, string>("directory", Directory!)
    };
}

containerName variable and directory name variable are set by parameters in other places in the code.

Where in the Backend Image Controller I'm trying to retrieve the containerName and blobDirectory as such:

public async Task<IActionResult> Save([FromForm] IList<IFormFile> UploadFiles)
{
    if (UploadFiles == null || UploadFiles.Count == 0)
        return BadRequest("No files uploaded.");
    var storageString = _[Redacted].GetValue<string>("********************");
    if (storageString == null)
        return (IActionResult)Results.Problem(title: "Invalid connection to media storage",
            statusCode: 500);
    var containerName = Request.Form["containerName"];
    Console.WriteLine("containerName: " + containerName);
    var directory = Request.Form["directory"];
    Console.WriteLine("directory: " + directory);
}

However, the "directory" and "containerName" form values from the Request are blank or null when the controller receives them. 

Would I need to send over an Authorization Token with my request? Am I not gathering the request form values correctly? Or is it something else?

[Kokila Poovendran]

Hi Andrew Sabin,

Thank you for reaching out, and we appreciate the detailed information you’ve shared. We reviewed the behavior you’re seeing when passing custom form data during image upload in the Blazor Rich Text Editor, and we can confirm why the values for containerName and directory are arriving as null on the server side.

When KeyValuePair<string, string> is used inside CustomFormData, the uploader does not serialize them into independent form fields. Instead, the data is combined into a single field named "key", with its value formatted as "fieldName,fieldValue". This is why Request.Form["containerName"] is empty in your controller. This behavior aligns with how the Rich Text Editor processes form data during image upload.

To ensure your server receives the correct form values, please use one of the following approaches:

Option 1: Send Form Data Using Anonymous Objects

Anonymous objects serialize properly as separate fields, allowing your API to receive them directly through Request.Form.

public void OnBeforeUploadImage(ImageUploadingEventArgs args)

{

    args.CurrentRequest = new List<object>

    {

        new { Authorization = "" }

    };

    args.CustomFormData = new List<object>

    {

        new { containerName = ContainerName ?? string.Empty },

        new { directory = Directory ?? string.Empty }

    };

}

This approach ensures Request.Form["containerName"] and Request.Form["directory"] arrive correctly at the backend. 

Option 2: Parse the Combined “key” Field (If You Must Use KeyValuePair)

If modifying the payload format isn't possible, you can extract the values by splitting the combined entries received under the "key" field:

public void Save(IList<IFormFile> UploadFiles)

{

    string containerName = null;

    string directory = null;

    // KeyValuePair sends as: field name="key", value="containerName,demoContainer"

    var keyValues = Request.Form["key"];

    foreach (var item in keyValues)

    {

        var parts = item.Split(',', 2); // Split into max 2 parts

        if (parts.Length == 2)

        {

            switch (parts[0].Trim())

            {

                case "containerName": containerName = parts[1].Trim(); break;

                case "directory": directory = parts[1].Trim(); break;

            }

        }

    }

}

If you have any follow‑up questions or need help validating the server‑side upload behavior, feel free to let us know. We’re happy to assist further!

[Andrew Sabin]

Hello there Kokila Poovendran,

Thank you very much for your help and reply! I very much appreciate the explanation as to what is going on with my request and why the CustomFormData wasn't being read by my Backend.

I did fix this problem by changing the form values to header values instead, but I will try out these solutions.

However, I have been having issues with the ImageDelete Action in regards to Headers and Form data showing up null when sent over to the backend:

<SfRichTextEditor @ref="rteObj" Placeholder="@Placeholder" @bind-Value="@Content" MaxLength="@MaxLength" ShowCharCount="true">
    <RichTextEditorQuickToolbarSettings Image="@Image" />
    <RichTextEditorEvents BeforeUploadImage="@OnBeforeUploadImage" ImageDelete="@OnImageDeleteHandler"/>
    <RichTextEditorImageSettings SaveUrl="@saveUrl" Path="@saveDirectory" RemoveUrl="@removeUrl" />
</SfRichTextEditor>

The function I have been using for the ImageDelete event:

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);
    var request = new HttpRequestMessage(HttpMethod.Post, "api/Image/DeleteFile")
    {
            Content = content
    };
    request.Headers.Add("x-container-name", ContainerName ?? string.Empty);
    request.Headers.Add("x-blob-directory", blobDirectory ?? string.Empty);


    try
    {
        var response = await HttpClient.SendAsync(request);
        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}");
    }
}

Backend API Image Controller for the DeleteFunction:

[HttpPost("DeleteFile")]

[Consumes("multipart/form-data")]

public async Task<IActionResult> DeleteFile([FromForm] IList<IFormFile> UploadFiles)

{
    try
    {
        if (UploadFiles == null || UploadFiles.Count == 0)
            return BadRequest("No files provided to delete.");


        var storageString = _configuration.GetValue<string>("ConnectionStrings:storageConnection");
        if (storageString == null)
            return (IActionResult)Results.Problem(title: "Invalid connection to media storage",
                statusCode: 500);


        var containerName = Request.Headers["containerName"];
        Console.WriteLine("ContainerName: " + containerName);
        var blobDirectory = Request.Headers["blobDirectory"];
        Console.WriteLine("Blob Directory: " + blobDirectory);

I know that the AfterImageDeleteEventArgs handles arguments differently than the ImageUploadingEventArgs so I'm wondering if I am sending the information incorrectly. Is there a proper way for me to send Header and Form values through the OnImageDeleteHandler​ function I've created?

If need be, I can provide to you a screenshot of the request and response values I have been getting when I try to send a request over to the "api/Image/DeleteFile" request.

[Andrew Sabin]

Hello again  Kokila Poovendran,

I figured out what the issue was for me in regards to the ImageDelete event, I had confused it for when I remove an image before inserting it into the document. Instead I updated the OnImageRemoving​ event to include a custom function similar to my solution what I did with the BeforeImageUpload​ event, with setting in different headers.

I will still try your solutions to for the CustomFormData solutions in both events.

Thank you very much for your time and help,

An

[Archana Jayakumar]

Hi Andrew,

Thanks for the update. Kindly get back to us if you need further assistance.

Regards,
Archana