File upload using Asp.Net Core Web API file is always null

You don't need to use 'multipart/form-data' with FormData

In Angular 2 component:

<input type="file" class="form-control" name="documents" (change)="onFileChange($event)" />

onFileChange(event: any) {
    let fi = event.srcElement;
    if (fi.files && fi.files[0]) {
        let fileToUpload = fi.files[0];

        let formData:FormData = new FormData();
         formData.append(fileToUpload.name, fileToUpload);

        let headers = new Headers();
        headers.append('Accept', 'application/json');
        // DON'T SET THE Content-Type to multipart/form-data, You'll get the Missing content-type boundary error
        let options = new RequestOptions({ headers: headers });

        this.http.post(this.baseUrl + "upload/", formData, options)
                 .subscribe(r => console.log(r));
    }
}

On API side

[HttpPost("upload")]
public async Task<IActionResult> Upload()
{
    var files = Request.Form.Files;

    foreach (var file in files)
    {
       // to do save
    }

    return Ok();
}

Update: After some clarification from the ASP.NET Core Team, it has to do with the compat switch in the Startup class. If you set it like this:

services
    .AddMvc()
    .SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

then you are fine if you also remove the [FromForm] Attribute from the file parameter.

Old Post: I ran into a similiar problem with the latest ASP.NET Core WebApi (2.1.2 at the time of this post), which I could only solve by accident after an hour of stackoverflowing, research and lots of trial and error. I was posting the file from an Angular 6 application like this:

const formData: FormData = new FormData();
formData.append('file', file, file.name);

const req = new HttpRequest('POST', 'upload-url', formData, {
    reportProgress: true
});

this.http.request(req).subscribe(...) // omitted the rest

The problem was, that the IFormFile file Action method parameter was always null even when putting [FromForm] in front it. The [FromForm] was necessary due to api controller behavior changes in ASP.NET Core 2.1, where [FromBody] becomes the default for api controllers. Strangely, it still didn't work, the value stayed null.

I finally solved it by explicitly stating the name of the form content parameter using the attribute, like this:

public async Task<IActionResult> UploadLogo([FromForm(Name = "file")] IFormFile file)        
{
     ...
}

Now the file upload was bound correctly to the controller parameter. I hope this might help someone in the future as it almost cost me my sanity :D

Another way with dotnet core, you can use IFormFile interface, with setting default headers:

Angular 2

 let formData = new FormData();
 formData.append("file", yourUploadFile);

 this.http.post("your_api_path", formData).subscribe(r => console.log(r));

Dotnet Core

 [HttpPost]
 [Route("/your_api_path")]
 public async Task<IActionResult> Upload(IFormFile file) {
     //...next awaiters...    
}

If you want send multiple files, you can use ICollection<IFormFile> as Upload params.

For sending multiple properties you can use custom model object and IFormFile will be one of properties.

Hope it help!