formData object not working with jquery AJAX post?

Question

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)

JSON.stringify only works with plain objects/arrays. FormData is not plain object. You have to pass FormData.getAll() instead of FormData — hindmost
– hindmost, Commented Sep 6, 2015 at 8:35
data: JSON.stringify(formData.getAll()) ? This results in Uncaught TypeError: formData.getAll is not a function — noa-dev
– noa-dev, Commented Sep 6, 2015 at 8:39
Then don't use JSON.stringify at all. Pass formData as is. — hindmost
– hindmost, Commented Sep 6, 2015 at 8:46
Okay, when I send it as it is - and then print_r the object in the php file and console.log it as a response i get a plain nothing ---- But the request Payload in the Header TAB in Network is now filled out with the send data — noa-dev
– noa-dev, Commented Sep 6, 2015 at 8:51

Viktor Bahtev · Accepted Answer · 2015-09-06 09:12:11Z

25

When you're sending an ajax request via jQuery and you want to send FormData you don't need to use JSON.stringify on this FormData. Also when you're sending file the content type must be multipart/form-data including boundry - something like this multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA

So to send FormData including some file via jQuery ajax you need to:

Set data to the FormData without any modifications.
Set processData to false (Lets you prevent jQuery from automatically transforming the data into a query string).
Set the contentType to false (This is needed because otherwise jQuery will set it incorrectly).

Your request should look like this:

var formData = new FormData();

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


$.ajax({
    type: "POST",
    url: "/foodoo/index.php?method=insertNewDog",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log(response);
    },
    error: function(errResponse) {
        console.log(errResponse);
    }
});

answered Sep 6, 2015 at 9:12

Viktor Bahtev

4,9182 gold badges36 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

noa-dev Over a year ago

I have enhanced my code to yours and - unfortunately the response is plain empty :( and by empty i don't mean "null" or so, its just an empty console.log

Lion789 Over a year ago

This is not working for me, look at my question here stackoverflow.com/questions/35954488/…

EL TEGANI MOHAMED Over a year ago

formData.append('name', $("#idofinputfiled").val());

V1xIII Over a year ago

Thanks for this, I was looking all over for why I wasn't getting any data from my ajax request, but the trick was "Set data to the FormData without any modifications". I just had to append my extra fields to the formData object.

Basheer AL-MOMANI · Accepted Answer · 2017-06-30 08:43:41Z

6

if you did exactly as pervious anwswer and still not working dont worry its working

maybe intelligence and quick wath are telling you its not working

but dont worry, look at network tap

its working

hope this saves your time

edited Jun 30, 2017 at 8:43

answered Dec 5, 2016 at 15:46

Basheer AL-MOMANI

15.5k9 gold badges103 silver badges96 bronze badges

Comments

ajinkya · Accepted Answer · 2017-11-26 07:01:50Z

2

//For those who use plain javascript

var form = document.getElementById('registration-form'); //id of form
var formdata = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST','form.php',true);
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
//if you have included the setRequestHeader remove that line as you need the 
// multipart/form-data as content type.
xhr.onload = function(){
 console.log(xhr.responseText);
}
xhr.send(formdata);

answered Nov 26, 2017 at 7:01

ajinkya

312 bronze badges

2 Comments

Mohammed Akhtar Zuberi Over a year ago

When answering, consider explaining the error/problem in the original question and how have you solved it. Don't forget that every question at StackOverflow is being viewed by a number of users and non-users to solve their similar problems. So for them to benefit from your answer, everyone would prefer to go through your explanation.

Shurvir Mori Over a year ago

This answer save my day. !!!

Collectives™ on Stack Overflow

formData object not working with jquery AJAX post?

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related