IFormFile in .NET Core Web API is null for axios and ajax file upload but works in Postman

Question

Introduction

So I have an API that will upload a file to Azure with the following signature:

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

This API was built and tested with Postman and it works great with the following parameters:

But when I attempt to call it within my react app with either the AJAX jQuery generated by Postman or axios, the IFormFile file variable is null.

handleFileChange = async (event) => {
    let formData = new FormData();
    let files = event.target.files[0];
    formData.append('file', logo); // Can put "files" here or the imported picture "logo"


 console.log("Form Data:", formData.get("files"));
    await axios.post('api/files/uploadfiles', formData,{
        'content-type': "multipart/form-data",
        'Content-Type': "multipart/form-data",
    })
         .then(response => response.data)
        .then(data => console.log("File Upload Response:" , data));
}

API Request that .NET Core gets with axios/ajax

API Request that .NET Core gets with Postman

You will notice here that the main difference is that the Postman has the file under files, while the axios request seems to only reference it under "Results View" but has nothing under files. Am I appending the correct item to the form? I have tried this with an imported image as well as a dynamic one from the following input field:

<FormGroup id = 'file-form'>
    <Label for="file">Attach Files:</Label>
    <Input type="file" name="files" id="File" onChange={this.handleFileChange}/>
</FormGroup>

but had no luck. Any help would be extremely appreciated!!

Update #1

After reviewing some Microsoft documentation I discovered a caveat in the Microsoft docs that says enctype of the form to "multipart/form-data". I attempted this to no avail.

ChizT · Accepted Answer · 2019-03-11 02:12:20Z

7

This is how I did it in the action method:

[HttpPost]
public void Post([FromForm]ValueFile files)
{
     //do logic
}

Then I create a ViewModel named ValueFile

public class ValueFile
{
    public IEnumerable<IFormFile> Files { get; set; }
}

In my web client I used jquery ajax:

$('#fileTest').on('change',
        function() {

            var fd = new FormData();
            fd.append('files', $('#fileTest')[0].files[0]);

            $.ajax({
                "async": true,
                "crossDomain": true,
                "url": "http://localhost:5000/api/values",
                "method": "POST",
                "processData": false,
                "contentType": false,
                "mimeType": "multipart/form-data",
                "data": fd
            }).done(function (response) {
                console.log(response);
            });
        });

<form id='file-form'>
    <Label for="file">Attach Files:</Label>
    <Input type="file" name="files" id="fileTest"  />
</form>

Hope this helps

answered Mar 11, 2019 at 2:12

ChizT

7273 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Mullinix Over a year ago

You bloody genius, I do not know why separating the fileform to it's own class fixed the issue, but now it uploads fine.

Collectives™ on Stack Overflow

IFormFile in .NET Core Web API is null for axios and ajax file upload but works in Postman

Introduction

API Request that .NET Core gets with axios/ajax

API Request that .NET Core gets with Postman

Update #1

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Introduction

API Request that .NET Core gets with axios/ajax

API Request that .NET Core gets with Postman

Update #1

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related