How to POST correctly a form that have data and files with VueJS, Axios and Laravel?

Question

I am posting here as a beginner of VueJS and Laravel. I am stuck with a problem that I can't fix by myself after hours of search.

I would like to know how correctly send and get back the inputs of a form (complex data and files).

Here is the submit method of the form:

onSubmit: function () {
  var formData = new FormData();
  formData.append("data", this.model.data);
  formData.append("partData", this.model.partData);
  if (this.model.symbolFile != null) {
    formData.append("symbolFile", this.model.symbolFile);
  }
  if (this.model.footprintFile != null) {
    formData.append("footprintFile", this.model.footprintFile);
  }
  axios
    .post("/api/updatecomponent", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res) => {
      // do something with res
      // console.log(res);
    })
    .catch((err) => {
      /* catch error*/
      console.log(err);
    });
},

The variable Data and PartData contains multiple string fields which will be stored in different tables in my database. Example : Data { string Value, string Tolerance, string Power }

Here is the method of the Controller in the server side:

public function updateComponent(Request $req)
{
   $data = $req->input('data');
   $partData = $req->input('partData');
   $symbolFile = $req->file('symbolFile'); // is null if the user did not modify the symbol
   $footprintFile = $req->file('symbolFile'); // is null if the user did not modify the footprint
   // etc...
}

I am able to get the files, everything work for that and I can store and read them :)

But, the problem is that I am unable to get back properly my Data or PartDat. When I do :

dd($partData);

I got as result in the console:

"[object Object]"

I am almost sure that I don't use correctly the FormData but after hours of search, I can't find the good way I should gave the Data and PartData to the FormData.

My code was working well for Data and PartData until I add FormData to support the file upload :(

Thank you for your help :)

Hi, you are almost there, you did the content-type multi-part/form-data, but you should add the file in a slightly different way, this answer may provide the details: stackoverflow.com/questions/43013858/… — Joshua Angnoe

Pascal Pascal · Accepted Answer · 2021-02-17T06:50:17

Here my working code:

Client side:

var formData = new FormData(); // create FormData
formData.append("subcat", this.subcategory);// append simple type data
formData.append("data", JSON.stringify(this.model.data));// append complex type data
axios // send FormData
  .post(url, formData, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  })
  .then((res) => {
    // do something with res
    // console.log(res);
  })
  .catch((err) => {
    /* catch error*/
    console.log(err);
  });

Server side:

public function createComponent(Request $req)
{
    $subcategory = $req->input('subcat'); // get the input parameter named 'subcat' (selected subcategory)        
    $data = json_decode($req->input('data'), true); // get the input, decode the jason format, force to return the result as an array
}

I hope it will help other peoples :)

How to POST correctly a form that have data and files with VueJS, Axios and Laravel?

1 Answers