0

I need to send both user input as JSON data and a file to an API end point. I can send each independently , but I cannot for the life of me figure out how to do it with both.

My API end point reads each just fine, but upon debug doing them together, the request never makes it past the Axios post call.

I've tried a number of tests to get this going, but no success so far.

*EDIT Turns out half the issue was on the server side. Using .Net 5 API and I was using IFormFile file and UserMetaData data as parameters. I found an article creating all POCOs in a model and using that. instead. I can now properly receive the file and data using POSTMAN, but it's now null when coming from axios. Here's the controller for reference

    [HttpPost]
    [Route("user-upload")]
    public async Task<IActionResult> UserUpload([FromForm] UserMetaData userData)
    {
        var result = " You sent the value " + userData;
        return Ok(userData.UserFile.FileName);
    }

Frustratingly now when I send the same data via axios, it hits the controller and it's null. I've verified that the data is there before arriving. Can anyone see something I missed ?

Here is some code to show :

Test Object 
let inputTest = {
    dataOwner: this.name,
    deviceSerialNumber: this.deviceSerialNumber,
    dataDistribution: this.distribution,
  }


  // New FormData to append file and user data
  let formData = new FormData();
  
  //File input
  for (let files of this.file) {
    formData.append("userFile", files);
  }
  
  //User data
  formData.append("userData", JSON.stringify(inputTest));


  //Axios call
   this.axios.post('API endpoint URL',
  formData,{
      header: {
        'Content-Type': 'multipart/form-data', 
        'Accept': 'application/json'
      },
    }
  ).then(response =>{ console.log(response)}).catch(error =>{ alert(error)})

I've tried changing the headers and content type, both together and separate. No luck.

I get this error when posting:

 **status: 415**
    **title: "Unsupported Media Type"**

I don't want to send these independent of one another as they completely voids the app needs.

Grateful for your help

swapmeet_Lou
  • 282
  • 2
  • 22
  • Does this answer your question? [sending file and json in POST multipart/form-data request with axios](https://stackoverflow.com/questions/50774176/sending-file-and-json-in-post-multipart-form-data-request-with-axios) – match Dec 16 '21 at 20:08
  • @match, unfortunately it does not. I tried what they had presented there, but still couldn't get any changes. – swapmeet_Lou Dec 16 '21 at 20:17
  • Even when you use `axios` in the same way, i.e. without setting `headers` ? – match Dec 16 '21 at 20:19
  • Yes, here's what I put in - this.axios.post('URL', formData, ).then(response =>{ console.log(response)}).catch(error =>{ alert(error)}) .. – swapmeet_Lou Dec 16 '21 at 20:20

1 Answers1

1

Try to use JSON.stringify on client side and JSON.parse on server side:

formData.append("userData", JSON.stringify(inputTest))
Anatoly
  • 20,799
  • 3
  • 28
  • 42
  • Anatoly, I did. I edited my post to reflect that. Unfortunately, same result. However, I tried the parse on the server side as I can see it's not even hitting the API because it dies at this call. – swapmeet_Lou Dec 16 '21 at 20:09
  • Maybe it's a server-side issue? – Anatoly Dec 16 '21 at 20:58
  • Anatoly, you're exactly right. I'm relatively new at posting to an API so I didn't think it was what it was. It seems I needed to change the parameter type from [FromBody] to FromForm in the API. I was then able to correctly receive both the file and data via POSTMAN correctly. However, that same data is null coming from my vue app, so I'm debugging as to why that's happening now. – swapmeet_Lou Dec 16 '21 at 21:24