Improve ModelBinding to FormData stringified JSON

[snebjorn]

Is your feature request related to a problem? Please describe.

I'm sending a file along with some JSON data related to the file.
While this is possible today using a CustomModelBinder
https://stackoverflow.com/questions/45017720/asp-net-core-and-formdata-binding-with-file-and-json-property

var formData = new FormData();
formData.append('model', JSON.stringify({ ... }));
formData.append('file', file, file.name)

// send formData to backend

public async Task<IActionResult> Post(
   [ModelBinder(BinderType = typeof(FormDataJsonBinder))] MyModel model,
   IFormFile file
)

I was hoping this could be supported in a smoother way.

Describe the solution you'd like

The only extra thing that needs to happen is turning the stringified JSON back into JSON before the normal model binding can happen.
So I don't think much needs to change.

The built-in model binder should just check if the payload is FormData. Then check if any parameters are a Complex Type, if so then JSON deserialize the key matching the parameter name. When deserialized then the normal model binding happens.

public async Task<IActionResult> Post(
   [FromForm] MyModel model, // <-- JSON.Deserialize(Request.Form["model"]) then ModelBind as normal
   IFormFile file
)

It would be nice if FormData supported JSON. But it does not :(

[davidfowl]

If we do anything here it'll be along the same lines as #22373. The code looked like this:

public class HomeController : Controller
{
    [Consumes("multipart/form-data")]
    public IActionResult Index([FromMultipartSection] MyModel model,    IFormFile file)
    {
          // Do something useful here
          return Ok();
    }
}

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

This would mean sending a request like this using FormData:

let jsonBlob = new Blob([JSON.stringify({ ... })], { type: "application/json" });
var formData = new FormData();
formData.append("model", jsonBlob);
formData.append("file", file, file.name);

This sends a multipart form post with 2 items, the first has a JSON content type so model binding would understand how to bind
that content using the model binding system. The second is a file, which it already understands.

cc @pranavkm

[snebjorn]

I see no issues with that solution :)

[davidfowl]

Out of curiosity how big are the JSON objects you're sending?

[snebjorn]

It varies. Sometimes it a simple {filename: 'new-name.jpg'}

Others it's a fabricjs object which will grow depending on what have been drawn http://fabricjs.com/docs/global.html#toObject
I did a quick test and drew some lines and it resulted in a json object of ~7100 length

But the real reason I made this feature request was because I'm having a hard time getting the FormDataJsonBinder to correctly bind to Delta<MyDerivedModel> as it says it cannot cast Delta<MyDerivedModel> to Delta<MyModel>

[HttpPatch("{id}")]
public async Task<IActionResult> Patch(
    [FromRoute] Guid id,
    [ModelBinder(BinderType = typeof(FormDataJsonBinder))] Delta<MyModel> model,
    IFormFile file = null
)

So I was hoping that if the middleware could "fix" the string into json before reaching the normal modelbinder then everything would "just work" :)

[javiercn]

@snebjorn thanks for contacting us.

We don't plan to support something like this since it's not a common ask. We expect people to extend the current modelbinding system to achieve custom scenarios like this one.

[snebjorn]

Fair enough 👍

[davidfowl]

See #4868