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.

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.

• javascript
• reactjs
• asp-core
• axios
• asp-core-webapi

1 Answer 1

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