RichTextEditor Insert and Update Image name

[RTi Developer]

I am trying to change the image file name for RichTextEditor to do this I use:

<RichTextEditorImageSettings AllowedTypes="@_allowedExtensions" SaveUrl="@_saveUrl" Path="./newsMedia/"/>
<RichTextEditorEvents OnImageUploadSuccess="UploadImageSuccess" ></RichTextEditorEvents>
@code {

private void UploadImageSuccess(ImageSuccessEventArgs args)
    {
        var headers = args.Response.Headers;
        Header = headers.Split("name: ");
        Header = Header[1].Split("\r");
        args.File.Name = Header[0];
    }

}

[HttpPost]
    [Route("save")]
    public async Task Save(IList<IFormFile> UploadFiles)
    {
        try
        {
            foreach (var imageFile in UploadFiles)
            {
                // Check each image extension
                _imageService.CheckImageExtension(imageFile);


                // Process image if it has content
                if (imageFile.Length > 0)
                {
                    using var memoryStream = new MemoryStream();
                    await imageFile.CopyToAsync(memoryStream);
                    var imageBytes = memoryStream.ToArray();


                    // Save image and get the filename
                    var imageFilename = await _imageService.SaveImageAsync(imageBytes);


                    // Set the filename in the response header
                    Response.Headers.Add("name", imageFilename);
                    Response.StatusCode = 200;
                    Response.ContentType = "application/json; charset=utf-8";
                }
            }
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            // Set an appropriate status code for errors
            Response.StatusCode = StatusCodes.Status500InternalServerError;
        }
    }

But in args.Response.Headers I get empty headers, although in the Network tab in the browser I can see that I have a header with "Name". Maybe it's because I have Client and Server on different ports

Is there any way to fix this?

[Dhanesh Priya Sankar]

Hi Alexandr Cutar,

We have reviewed the sample provided and found that the issue with obtaining headers in the UploadImageSuccess event was not replicated. This suggests that the configuration in your application might need some adjustments.

To ensure proper handling of API responses, including headers, please verify the following settings in your Program.cs file:

1. HttpClient Configuration: Ensure that HttpClient is properly configured to handle API calls. For example:

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

1. CORS Configuration: If your API is hosted on a different domain, you need to configure CORS to allow headers. You can do this in the Program.cs file of your API project:

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>    {
        builder.WithOrigins("https://your-blazor-app.com")
               .AllowAnyHeader()
               .AllowAnyMethod();
    });
});

app.UseCors();

For more information on calling a web API from an ASP.NET Core Blazor app, you can refer to the Microsoft Learn article.

Here's the revised response with the attached sample content mentioned:

Attachment: SyncfusionBlazorApp1_a04c6e6a.zip

Regards,

Dhanesh Priya Sankar

[RTi Developer]

I did it.

My Program.cs in API project

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policyBuilder =>
    {
        policyBuilder.WithOrigins("https://localhost:7194")
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

My Program.cs in Blazor project

builder.Services.AddScoped(sp =>newHttpClient{BaseAddress=newUri("https://localhost:7003")});

The problem remains

[RTi Developer]

I found a solution by adding a method to the CORS configuration

.WithExposedHeaders("name");

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policyBuilder =>
    {
        policyBuilder.WithOrigins("https://your-blazor-app-url.com")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .WithExposedHeaders("name");
    });
});

[Vinothkumar Yuvaraj]

Hi Alexandr Cutar,

We are glad that you have found the solution. Please let us know if you need any further assistance.

Regards,
Vinothkumar