Blazor WASM MudBlazor upload file to server

Question

I have a Blazor WASM core hosted application, which has a Blazor client app and a .Net server project. I am trying to create a file upload when the user saves an object. The client service will send the request to the server controller. Here is what it looks like:

Models:

public class MyObjectDTO : BaseModel<MyObjectDTO>
{
    public int Id { get; set; }
    [Required] public string MyObjectName { get; set; } = string.Empty;
    public List<ItemDocumentDTO>? MyFiles { get; set; }
}
 public class ItemDocumentDTO : BaseModel<ItemDocumentDTO>
 {
    public int Id { get; set; }
    [Required(ErrorMessage = "Document Name is required")]       
    public string DocumentName { get; set; } = string.Empty;
    public IBrowserFile? File { get; set; }
}

Client Service:

public async Task<ServiceResponse<int>> CreateNewObject(MyObjectDTO newObject)
{
    using var client = await _httpClientFactory.CreateClientAsync("default");
    var multipartContent = new MultipartFormDataContent();
    if (newObject.MyFiles != null)
    {
        foreach(var item in  newObject.MyFiles)
        {
            if(item.File != null)
            {
                var fileContent = new StreamContent(item.File.OpenReadStream());
                multipartContent.Add(fileContent, "files", item.File.Name);
            }
        }
    }

    var result = await client.PostAsJsonAsync($"api/MyObject/create-item", new {
        createObject = newObject,
        filesContent = multipartContent
    });
    
    if (result != null && result.Content != null)
    {
        var response = await result.Content.ReadFromJsonAsync<ServiceResponse<int>>();

        if (response != null)
        {
            return response;
        }
    }
    return new ServiceResponse<int>
    {
        Success = false,
        Message = "Failed to create end item.",
        Data = 0
    };
}

Server Controller:

 [HttpPost("create-item")]
 public async Task<ActionResult<ServiceResponse<int>>> CreateItem([FromForm] MyObjectDTO createObject)
 {
    //break point does not get hit here.  fails before hitting the controller. 
    return Ok(await this._newObjectService.CreateNewItem(createObject));
 }

When I submit, before it hits the Server controller, I get an error in the browser console saying:

{ "type": "https://tools.ietf.org/html/rfc7231#section-6.5.1", "title": "One or more validation errors occurred.", "status": 400, "traceId": "00-987c028fd41bb0e6605243e6b5de5d4c-c7f26f97d41a2b54-00", "errors": { "MyObjectName": [ "The MyObjectName field is required." ] } }

Even though the value is not null and the form validates before it is sent. How should I be sending the object, and files, to my server controller?

Update

I updated my code as suggested:

public class YourRequestModelDTO
   {
       public ItemDTO createItem { get; set; }
       public List<IFormFile>? files { get; set; }
       public string? Key { get; set; }
   }
   public class ItemDTO : BaseModel<ItemDTO>{
    public int Id { get; set; }
    [Required] public string ItemName { get; set; } = string.Empty;
   }

public async Task<ServiceResponse<int>> CreateNewItem(ItemDTO newItem)
{
    using var client = await _httpClientFactory.CreateClientAsync("default");
      
    using (MultipartFormDataContent content = new MultipartFormDataContent())
    {

        var file = newItem.ItemDocuments.First().File;
        var fileContent = new StreamContent(file.OpenReadStream(1024 * 15));

        fileContent.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);

        content.Add(
            content: fileContent,
            name: "files",
            fileName: file.Name);

        content.Add(new StringContent(newItem.ItemName), "createItem.ItemName");
        content.Add(new StringContent(newItem.EndDescription), "createItem.EndDescription");

        try
        {
            var result = await client.PostAsync("api/MyItem/create-item", content);
            if (result != null && result.Content != null)
            {
                var response = await result.Content.ReadFromJsonAsync<ServiceResponse<int>>();
                if (response != null)
                {
                    return response;
                }
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }
}

 [Authorize]  
 [HttpPost("create-item")]
 public async Task<ActionResult<ServiceResponse<int>>> CreateItem([FromForm] YourRequestModelDTO createItem)
 {
     return Ok(await this._itemService.CreateNewItem(createItem.createItem));
 }

but once it tries to reach out to the controller, I get an error in the browser console saying "One or more validation errors occurred." and "CreateItem.createItem: the createItem field is required."

Solution What I ended up doing we, in my client service:

using (MultipartFormDataContent content = new MultipartFormDataContent())
{
    var file = newItem.ItemDocuments.First().File;
    var fileContent = new StreamContent(file.OpenReadStream(1024 * 15));    
    fileContent.Headers.ContentType = new MediaTypeHeaderValue(file.ContentType);

    content.Add(
        content: fileContent,
        name: "files",  // The name should match the parameter name in the API controller
        fileName: file.Name);

    var test = JsonConvert.SerializeObject(newItem);
    var itemContent = new StringContent(test, Encoding.UTF8, "application/json");
    content.Add(itemContent, "NewItem");

... }

Then in my controller:

 [Authorize]  
 [HttpPost("create-item")]
 public async Task<ActionResult<ServiceResponse<int>>> CreateItem(){
         var streamContent = new StreamContent(HttpContext.Request.Body);
var content = new MultipartFormDataContent();
var serializedObject = HttpContext.Request.Form.FirstOrDefault().Value;
//deserialize from here.
 }

Answer 1

We would receive the files from Request.Form instead of Request.Body
with IFormFile/IFormFileCollection on webapi side, we don't post the content as json ,if you want to send other entity with your files ,you could add key-value pairs in StringContent,a minimal example:

codes in Razor Component:

using var content = new MultipartFormDataContent();

// here e.GetMultipleFiles() would retrun IReadOnlyList<IBrowserFile>
foreach(var file in e.GetMultipleFiles(5))
{

    var fileContent =
                new StreamContent(file.OpenReadStream(1024 * 15));

    fileContent.Headers.ContentType =
        new MediaTypeHeaderValue(file.ContentType);

    content.Add(
        content: fileContent,
        name: "files",
        fileName: file.Name);

}
content.Add(new StringContent("val1"), "key");
content.Add(new StringContent("val2"), "MyET.Prop1");
content.Add(new StringContent("val3"), "MyET.Prop2");
var response =
        await httpClient.PostAsync("api/fileupload",
        content);

Controller/Models in webapi:

[HttpPost]
public void Post([FromForm] UploadModel uploadModel)
{

}

....
public class UploadModel
{
    public List<IFormFile>? files {get;set;}

    public string? Key { get; set; }


    public MyEntity?  MyET { get; set; }
}

public class MyEntity
{

    public string? Prop1 { get; set; }

    public string? Prop2 { get; set; }
}

Result:

doucments related:Blazor FileUpload , Model binding

Update: if you want to serialize a complex model and send it with your file,you may create a model binder,a minimal example:

Razor component:

using var content = new MultipartFormDataContent();
foreach(var file in e.GetMultipleFiles(5))
{

    var fileContent =
                new StreamContent(file.OpenReadStream(1024 * 15));

    fileContent.Headers.ContentType =
        new MediaTypeHeaderValue(file.ContentType);

    content.Add(
        content: fileContent,
        name: "files",
        fileName: file.Name);

}
content.Add(new StringContent("val1"), "key");

var MyET = new { Prop1 = "val2", Prop2 = "val3" };
var jsonstr = System.Text.Json.JsonSerializer.Serialize(MyET);         
content.Add(new StringContent(jsonstr), "MyET");
var response =
        await httpClient.PostAsync("api/fileupload",
        content);

the model binder:

public class JsonModelBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
        {
            throw new ArgumentNullException(nameof(bindingContext));
        }

        
        var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
        if (valueProviderResult != ValueProviderResult.None)
        {
            bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);

            //  convert the input value
            var valueAsString = valueProviderResult.FirstValue;
            var result = System.Text.Json.JsonSerializer.Deserialize(valueAsString, bindingContext.ModelType);
            if (result != null)
            {
                bindingContext.Result = ModelBindingResult.Success(result);
                return Task.CompletedTask;
            }
        }

        return Task.CompletedTask;
    }
}

apply the binder:

public class UploadModel
{
    public List<IFormFile>? files {get;set;}

    public string? Key { get; set; }

    [ModelBinder(BinderType = typeof(JsonModelBinder))]
    public MyEntity?  MyET { get; set; }
}

Result: