title: formData object not working with jquery AJAX post?
body: <p>lets jump right into the code : </p>
  
  <pre><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);
  </code></pre>
  
  <p>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.</p>
  
  <p>Right after that I have this jquery ajax request : </p>
  
  <pre><code>$.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(){
    }
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Unfortunately my response in the console.log(data) is empty. </p>
  
  <p>Also if you check the HEADER in the Network tab you get the following empty output:</p>
  
  <p><a href="https://i.stack.imgur.com/kT9ED.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kT9ED.png" alt="enter image description here"></a></p>
  
  <p>Success function gets called (just for clarification)</p>