lets jump right into the code :

var formData = new FormData();



formData.append('name', dogName);

formData.append('weight', dogWeight);

formData.append('activity', dogActivity);

formData.append('age', dogAge);

formData.append('file', document.getElementById(dogImg).files[0]);

console.log(formData);

Here I am appending some strings and one file object to the formData object in order to send all the information asynchronous to the server.

Right after that I have this jquery ajax request :

$.ajax({

  type: POST,

  url: /foodoo/index.php?method=insertNewDog,

  data: JSON.stringify(formData),

  processData: false,  // tell jQuery not to process the data

  contentType: multipart/form-data; charset=utf-8,

  success: function(response){

     console.log(response);

  },

  error: function(){

  }

});

So here I am trying to POST the info to the server, on the server php file I have a simple print_r of the POST so I see what gets through and what not.

Unfortunately my response in the console.log(data) is empty.

Also if you check the HEADER in the Network tab you get the following empty output:

Success function gets called (just for clarification)