CODEWITHSUNDEEP
javascriptreactjsasp.net-coreaxiosasp.net-core-webapi
Sam Mullinix
Sam Mullinix

Reputation: 306

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

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:

Postman API

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

enter image description here

API Request that .NET Core gets with Postman

enter image description here 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.

Upvotes: 2

Views: 6072

Answers (1)

ChizT
ChizT

Reputation: 717

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

Upvotes: 7

Related Questions