Upload files and JSON in ASP.NET Core Web API

Question

How can I upload a list of files (images) and json data to ASP.NET Core Web API controller using multipart upload?

I can successfully receive a list of files, uploaded with multipart/form-data content type like that:

public async Task<IActionResult> Upload(IList<IFormFile> files)

And of course I can successfully receive HTTP request body formatted to my object using default JSON formatter like that:

public void Post([FromBody]SomeObject value)

But how can I combine these two in a single controller action? How can I upload both images and JSON data and have them bind to my objects?

Bruno Zell · Answer 1 · 2019-11-26T08:15:37.080

Simple, less code, no wrapper model

There is simpler solution, heavily inspired by Andrius' answer. By using the ModelBinderAttribute you don't have to specify a model or binder provider. This saves a lot of code. Your controller action would look like this:

public IActionResult Upload(
    [ModelBinder(BinderType = typeof(JsonModelBinder))] SomeObject value,
    IList<IFormFile> files)
{
    // Use serialized json object 'value'
    // Use uploaded 'files'
}

Implementation

Code behind JsonModelBinder (see GitHub or use NuGet package):

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.ModelBinding;

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

        // Check the value sent in
        var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
        if (valueProviderResult != ValueProviderResult.None) {
            bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);

            // Attempt to convert the input value
            var valueAsString = valueProviderResult.FirstValue;
            var result = Newtonsoft.Json.JsonConvert.DeserializeObject(valueAsString, bindingContext.ModelType);
            if (result != null) {
                bindingContext.Result = ModelBindingResult.Success(result);
                return Task.CompletedTask;
            }
        }

        return Task.CompletedTask;
    }
}

Example request

Here is an example of a raw http request as accepted by the controller action Upload above.

A multipart/form-data request is split into multiple parts each separated by the specified boundary=12345. Each part got a name assigned in its Content-Disposition-header. With these names default ASP.Net-Core knows which part is bound to which parameter in the controller action.

Files that are bound to IFormFile additionally need to specify a filename as in the second part of the request. Content-Type is not required.

Another thing to note is that the json parts need to be deserializable into the parameter types as defined in the controller action. So in this case the type SomeObject should have a property key of type string.

POST http://localhost:5000/home/upload HTTP/1.1
Host: localhost:5000
Content-Type: multipart/form-data; boundary=12345
Content-Length: 218

--12345
Content-Disposition: form-data; name="value"

{"key": "value"}
--12345
Content-Disposition: form-data; name="files"; filename="file.txt"
Content-Type: text/plain

This is a simple text file
--12345--

Testing with Postman

Postman can be used to call the action and test your server side code. This is quite simple and mostly UI driven. Create a new request and select form-data in the Body-Tab. Now you can choose between text and file for each part of the reqeust.

Great solution thanks ! Only question I have now is how can I call the Upload route from Postman for an integration test ? How do I represent the IFormFile in JSON ? — Patrice Cote, Jun 05 '18 at 15:31
@PatriceCote I have updates the answer. Please take a look :) — Bruno Zell, Jun 05 '18 at 17:42
Thanks a lot that was exactly what I was looking for. But then, maybe a simple FromForm instead of FromBody would have done the trick I guess. — Patrice Cote, Jun 05 '18 at 22:20
@PatriceCote Ah nice. I'm not that into it anymore, but I don't think I have tried `FromForm` yet haha... — Bruno Zell, Jun 05 '18 at 22:22
I like the simplicity, but did anyone get this to actually work? bindingContext.ModelName is empty. — Michael, Aug 21 '18 at 18:47
This is exactly what I'm looking for, but I don't know how to post the request using HttpClient :/. Any help please :) — Mohamed BOUZIDI, Sep 09 '19 at 15:28
this will not generate the proper swagger model. and json will not be sent as a body but query param ... — pregmatch, Jan 20 '20 at 19:39
Great Solution but please add try catch in that else code will break on Model validation — MayankGaur, Mar 13 '20 at 10:39
Anyone met "Multipart body length limit 16384 exceeded." error message? — , Mar 09 '21 at 02:33
Upvote/add comments to this thread to try to get this behavior out-of-the-box: https://github.com/dotnet/aspnetcore/issues/4868 — aardvark, Apr 08 '22 at 16:42
It should be mentioned that Swashbuckle Swagger packages do not work correctly with this — Camilo Terevinto, Apr 14 '22 at 11:28

score 43 · Answer 2 · answered Feb 28 '19 at 19:25

I'm working with Angular 7 on the front-end, so I make use of the FormData class, which allows you to append strings or blobs to a form. They can be pulled out of the form in the controller action using the [FromForm] attribute. I add the file to the FormData object, and then I stringify the data I wish to send together with the file, append it to the FormData object, and deserialize the string in my controller action.

Like so:

//front-end:
let formData: FormData = new FormData();
formData.append('File', fileToUpload);
formData.append('jsonString', JSON.stringify(myObject));

//request using a var of type HttpClient
http.post(url, formData);

//controller action
public Upload([FromForm] IFormFile File, [FromForm] string jsonString)
{
    SomeType myObj = JsonConvert.DeserializeObject<SomeType>(jsonString);

    //do stuff with 'File'
    //do stuff with 'myObj'
}

You now have a handle on the file and the object. Note that the name you provide in the params list of your controller action must match the name you provide when appending to the FormData object on the front-end.

@Tzof Take a look at the [last example](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) on the MDN page — andreisrob, Jul 16 '19 at 15:58
So much easier than the other examples here. Works great. Per Tzof's? Just do another append with each additional file with the same name. — VirtualLife, Sep 05 '20 at 22:49

Andrius · Accepted Answer · 2017-01-04T20:12:35.503

Apparently there is no built in way to do what I want. So I ended up writing my own ModelBinder to handle this situation. I didn't find any official documentation on custom model binding but I used this post as a reference.

Custom ModelBinder will search for properties decorated with FromJson attribute and deserialize string that came from multipart request to JSON. I wrap my model inside another class (wrapper) that has model and IFormFile properties.

IJsonAttribute.cs:

public interface IJsonAttribute
{
    object TryConvert(string modelValue, Type targertType, out bool success);
}

FromJsonAttribute.cs:

using Newtonsoft.Json;
[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
public class FromJsonAttribute : Attribute, IJsonAttribute
{
    public object TryConvert(string modelValue, Type targetType, out bool success)
    {
        var value = JsonConvert.DeserializeObject(modelValue, targetType);
        success = value != null;
        return value;
    }
}

JsonModelBinderProvider.cs:

public class JsonModelBinderProvider : IModelBinderProvider
{
    public IModelBinder GetBinder(ModelBinderProviderContext context)
    {
        if (context == null) throw new ArgumentNullException(nameof(context));

        if (context.Metadata.IsComplexType)
        {
            var propName = context.Metadata.PropertyName;
            var propInfo = context.Metadata.ContainerType?.GetProperty(propName);
            if(propName == null || propInfo == null)
                return null;
            // Look for FromJson attributes
            var attribute = propInfo.GetCustomAttributes(typeof(FromJsonAttribute), false).FirstOrDefault();
            if (attribute != null) 
                return new JsonModelBinder(context.Metadata.ModelType, attribute as IJsonAttribute);
        }
        return null;
    }
}

JsonModelBinder.cs:

public class JsonModelBinder : IModelBinder
{
    private IJsonAttribute _attribute;
    private Type _targetType;

    public JsonModelBinder(Type type, IJsonAttribute attribute)
    {
        if (type == null) throw new ArgumentNullException(nameof(type));
        _attribute = attribute as IJsonAttribute;
        _targetType = type;
    }

    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null) throw new ArgumentNullException(nameof(bindingContext));
        // Check the value sent in
        var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
        if (valueProviderResult != ValueProviderResult.None)
        {
            bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);
            // Attempt to convert the input value
            var valueAsString = valueProviderResult.FirstValue;
            bool success;
            var result = _attribute.TryConvert(valueAsString, _targetType, out success);
            if (success)
            {
                bindingContext.Result = ModelBindingResult.Success(result);
                return Task.CompletedTask;
            }
        }
        return Task.CompletedTask;
    }
}

Usage:

public class MyModelWrapper
{
    public IList<IFormFile> Files { get; set; }
    [FromJson]
    public MyModel Model { get; set; } // <-- JSON will be deserialized to this object
}

// Controller action:
public async Task<IActionResult> Upload(MyModelWrapper modelWrapper)
{
}

// Add custom binder provider in Startup.cs ConfigureServices
services.AddMvc(properties => 
{
    properties.ModelBinderProviders.Insert(0, new JsonModelBinderProvider());
});

What InputFormatter should I use to receive data as multipart/form-data ? getting error 500 if content-type is multipart/form-data. — Asatur Galstyan, Jul 18 '17 at 07:18
You saved my live, Andrius, for sure. I spent whole day thinking of this. I use swagger in my API and it's fine when nested object in model has only common types properties. Swagger sends them like: "NestedObject.Id" and so on, but when it comes to arrays -> your JSON binder is the only working solution! — Alex Wyler, Jun 16 '20 at 23:10
Thanks for your solution.How to send request to api with postman?I'm sending with form-data..But it get error 415 — Majid821, Sep 09 '20 at 06:32
Who are using web api use `services.AddControllers(o => o.ModelBinderProviders.Insert(0, new JsonModelBinderProvider()));` inside `startup.cs` `ConfigureServices` — Moumit, Oct 26 '21 at 18:11

score 15 · Answer 4 · answered Jun 06 '18 at 14:05

15

Following the excellent answer by @bruno-zell, if you have only one file (I didn't test with an IList<IFormFile>) you can also just declare your controller as this :

public async Task<IActionResult> Create([FromForm] CreateParameters parameters, IFormFile file)
{
    const string filePath = "./Files/";
    if (file.Length > 0)
    {
        using (var stream = new FileStream($"{filePath}{file.FileName}", FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }

    // Save CreateParameters properties to database
    var myThing = _mapper.Map<Models.Thing>(parameters);

    myThing.FileName = file.FileName;

    _efContext.Things.Add(myThing);
    _efContext.SaveChanges();


    return Ok(_mapper.Map<SomeObjectReturnDto>(myThing));
}

Then you can use the Postman method shown in Bruno's answer to call your controller.

answered Jun 06 '18 at 14:05

Patrice Cote

3,572
12
43
72

4

This is great, what does the C# client code look like if trying to do an HttpClient.PostAsync call to upload the file? – Mark Redman Jul 02 '18 at 18:18
I guess all you you have to do is call call it like it's sync and just adds "await" before the call or ".Result" at the end – Patrice Cote Jul 10 '18 at 19:05
2

I did some testing with [FromForm] and I get an object of the correct type, but the parameters are not set. – Rasmus Christensen Aug 20 '18 at 09:23
1

Agreed with @Mukus. File is always null – Rukshan Dangalla Mar 06 '19 at 01:06
I put in the first argument (MyModel paramters, it didn't work. I changed it to (string parameters, and I was able to get the object as json :) – Ali Keserwan Jan 29 '20 at 15:54

score 2 · Answer 5 · edited Jan 03 '19 at 06:31

2

I had a similar issue and I solved the problem by using [FromForm] attribute and FileUploadModelView in the function as follows:

[HttpPost("Save")]
public async Task<IActionResult> Save([FromForm] ProfileEditViewModel model)
{          
  return null;
}

edited Jan 03 '19 at 06:31

Klaus Gütter

11,151
6
31
36

answered Jan 03 '19 at 06:03

waqar iftikhar

65
1

score 1 · Answer 6 · answered Mar 06 '19 at 01:24

I wanted to do the same using Vue frontend and .net core api. But for some weird reason IFormFile always returned null. So then I had to change it to IFormCollection and got it sorted out. Here is the code for anyone facing the same issue :)

public async Task<IActionResult> Post([FromForm]IFormCollection files)

score 1 · Answer 7 · answered Jun 29 '21 at 11:10

An updated version for .net 5 based on @bruno-zell 's answer with added support to multiple files

using System;
using System.Collections;
using System.Text.Json;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using Microsoft.Extensions.Options;

public class JsonModelBinder : IModelBinder
{
    private readonly JsonOptions _jsonOptions;
    public JsonModelBinder(IOptions<JsonOptions> jsonOptions)
    {
        _jsonOptions = jsonOptions.Value;
    }
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
        {
            throw new ArgumentNullException(nameof(bindingContext));
        }

        // Check the value sent in
        var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
        if (valueProviderResult != ValueProviderResult.None)
        {
            bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);

            string toSerialize;
            // Attempt to convert the input value
            if (typeof(IEnumerable).IsAssignableFrom(bindingContext.ModelType))
            {
                toSerialize = "[" + string.Join<string>(',', valueProviderResult.Values) + "]";
            }
            else
            {
                toSerialize = valueProviderResult.FirstValue;
            }
            var result = JsonSerializer.Deserialize(toSerialize, bindingContext.ModelType, _jsonOptions.JsonSerializerOptions);
            if (result != null)
            {
                bindingContext.Result = ModelBindingResult.Success(result);
                return Task.CompletedTask;
            }
        }

        return Task.CompletedTask;
    }
}

score 1 · Answer 8 · 2022-05-20T11:36:55.003

You don't need "JsonModelBinder" and other custom stuff, I have model

public class UpdateAdminProfileInfoRequest
{
    
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Mobile { get; set; }
    public IFormFile Image { get; set; }
}

and in Controller action method only one argument

[FromForm]UpdateAdminProfileInfoRequest request

and everything works fine. If you need multiple file upload just change

IFormFile

with

List<IFormFile> files {get; set}

Be careful I don't know why but currently I use .net6 and nor JsonProperty nor JsonPropertyName don't work on IFormFile, if you decorate Image property with

[JsonProperty("imageFile")]

attribute or something like this asp.net don't map client "imageFile" field to "Image" property.

This is working for me on Core 3.1 using Swagger. Would be good to know if the previous answers were for previous .net versions, or if we're just missing something? — Christoph, Dec 08 '22 at 10:54

score 1 · Answer 9 · answered Jun 19 '22 at 14:19

I'm just adding my two cents.

The Angular app function for uploading file with json

 uploadFileWithJson = (files) => {
if (files.length === 0) {
  return;
}

let fileToUpload = <File>files[0];
const formData = new FormData();
formData.append('file', fileToUpload, fileToUpload.name);

const user = {
  "name":"Vikram",
  "age":35
}
const userTxt = JSON.stringify(user);
formData.append('userData',userTxt);    

this.http.post('https://localhost:5001/api/upload/UploadFileWithJson', formData, {reportProgress: true, observe: 'events'})
  .subscribe({
    next: (event) => {
    if (event.type === HttpEventType.UploadProgress)
      this.progress = Math.round(100 * event.loaded / event.total);
    else if (event.type === HttpEventType.Response) {
      this.message = 'Upload success.';
      this.onUploadFinished.emit(event.body);
    }
  },
  error: (err: HttpErrorResponse) => console.log(err)
});

}

And .NET Core API

[HttpPost("UploadFileWithJson"), DisableRequestSizeLimit]        
    public IActionResult UploadFileWithJson([FromForm]UserWithFile model)
    {
        try
        {
            if (model == null)
                throw new Exception($"{nameof(model)} is null");

            if (model.File == null)
                throw new Exception("File is null");

            var folderName = Path.Combine("Resources", "Images");
            var pathToSave = Path.Combine(Directory.GetCurrentDirectory(), folderName);
            if (model.File.Length > 0)
            {
                var fileName = ContentDispositionHeaderValue.Parse(model.File.ContentDisposition).FileName.Trim('"');
                var fullPath = Path.Combine(pathToSave, fileName);
                var dbPath = Path.Combine(folderName, fileName);
                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    model.File.CopyTo(stream);
                }
                return Ok(new { dbPath });
            }
            else
            {
                return BadRequest();
            }                
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"Internal server error: {ex}");
        }
    }

as well as model class.

public class UserWithFile
{
    public string UserData { get; set; }

    public IFormFile File { get; set; }
}

Now notice, in Angular app, the FormData attribute file name first letter f is small-cased. However, in .NET Core same is File (or upper-cased). Same is case for userData.

I simply changed file and userData in Angular app to File and UserData respectively.

Voila! .

score 0 · Answer 10 · answered Dec 29 '16 at 02:38

0

I am not sure if you can do the two things in a single step.

How I have achieved this in the past is by uploading the file through ajax and returning the file url back in the response and then pass it along with post request to save the actual record.

answered Dec 29 '16 at 02:38

Chirdeep Tomar

4,281
8
37
66

Yes, that would be certainly possible but I'm trying to avoid two different connections to server for one task just to keep everything in sync between clients and server. I think I have found a solution to my problem though. I will post it here when I have some more time. – Andrius Dec 29 '16 at 11:36

score 0 · Answer 11 · answered Jun 16 '20 at 16:27

I had a similar problem when posting from angular to asp core api.

Chrome: Form Data

------WebKitFormBoundarydowgB6BX0wiwKeOk
Content-Disposition: form-data; name="file1"

undefined
------WebKitFormBoundarydowgB6BX0wiwKeOk
Content-Disposition: form-data; name="file2"

undefined
------WebKitFormBoundarydowgB6BX0wiwKeOk
Content-Disposition: form-data; name="reportData"; filename="blob"
Content-Type: application/json

{"id":2,"report":3,"code":"XX0013","business":"01","name":"Test","description":"Description"}
------WebKitFormBoundarydowgB6BX0wiwKeOk--

Here is how I do it:

I use reportData as an uploaded file data, then I read the file's contents.

[HttpPost]
public async Task<IActionResult> Set([FromForm] IFormFile file1, [FromForm] IFormFile file2, [FromForm] IFormFile reportData)
{
    try
    {
        ReportFormModel.Result result = default;

        if (reportData != null)
        {
            string reportJson = await reportData.ReadFormFileAsync();
            ReportFormModel.Params reportParams = reportJson.JsonToObject<ReportFormModel.Params>();

            if (reportParams != null)
            {
                //OK
            }
        }
        return Ok(result);
    }
    catch (Exception ex)
    {
        return BadRequest();
    }
}


public static class Utilities
{
    public static async Task<string> ReadFormFileAsync(this IFormFile file)
    {
        if (file == null || file.Length == 0)
        {
            return await Task.FromResult((string)null);
        }

        using var reader = new StreamReader(file.OpenReadStream());
        return await reader.ReadToEndAsync();
    }
}

Although this way is not appreciated, but it worked.

Upload files and JSON in ASP.NET Core Web API

11 Answers11

Simple, less code, no wrapper model

Implementation

Example request

Testing with Postman

Linked