I’m working on a project with separate backend and frontend folders. On the frontend side, I have the following service for uploading files:

public async Task<IEnumerable<FileMetaDataDto>> UploadFileAsync(IList<IBrowserFile> files, Guid projectId, Guid? commentId)

{
using var content = new MultipartFormDataContent();

foreach (var file in files)
{
    var fileContent = new StreamContent(file.OpenReadStream());
    fileContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
    {
        Name = "files",
        FileName = file.Name,
    };
    
    fileContent.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);

    content.Add(fileContent);
}

Console.WriteLine($"Check-3 {projectId}, Comment ID: {commentId}, Content: {content}");

var response = await _httpClient.PostAsync($"api/Files/project/{projectId}/upload-multiple?commentId={commentId}", content);
response.EnsureSuccessStatusCode();

return await response.Content.ReadFromJsonAsync<IEnumerable<FileMetaDataDto>>();

}
On the backend side, my controller looks like this:

[HttpPost("project/{projectId}/upload-multiple")]

public async Task UploadMultiple(IEnumerable files, Guid projectId, [FromQuery] Guid? commentId)
{
Console.WriteLine(“Check server side”);
var results = await _fileService.UploadMultipleFilesAsync(files, projectId, commentId);

return Ok(results);

}
When I try to upload files, I get an error after the console log Console.WriteLine($”Check-3 {projectId}, Comment ID: {commentId}, Content: {content}”):

An error occurred while sending the request.

Additionally, I don’t see the console log from the server side.

When I attempt to add multiple files, I receive the following error:

Error: There is no file with ID 1. The file list may have changed. See https://aka.ms/aspnet/blazor-input-file-multiple-selections.
Error: There is no file with ID 1. The file list may have changed. See https://aka.ms/aspnet/blazor-input-file-multiple-selections.
at Ze (https://localhost:55327/_framework/blazor.server.js:1:36968)
at Object.readFileData (https://localhost:55327/_framework/blazor.server.js:1:36894)
at https://localhost:55327/_framework/blazor.server.js:1:3244
at new Promise ()
at y.beginInvokeJSFromDotNet (https://localhost:55327/_framework/blazor.server.js:1:3201)
at Yt._invokeClientMethod (https://localhost:55327/_framework/blazor.server.js:1:60713)
at Yt._processIncomingData (https://localhost:55327/_framework/blazor.server.js:1:58188)
at Yt.connection.onreceive (https://localhost:55327/_framework/blazor.server.js:1:51829)
at s.onmessage (https://localhost:55327/_framework/blazor.server.js:1:79974)

The other endpoints in my project are working correctly.
I have verified the URLs and endpoints to ensure they match.
I’m using Blazor Server for the frontend.