Using FormData with $http

[kru...@seznam.cz]

Anyone knows how to use FormData object with $http service? Because this doesn't seem to work:

var payload = new FormData();

payload.append("CustomField", "This is some data");

$http.post(url, payload);

Result from this is post with an empty object. Maybe set header to somethink else?

The reason I am using FormData is, that it can let you easily upload files.

[Jack Chu]

I'm getting the same thing. The request payload is always empty even though I'm passing form data in.

[soope...@gmail.com]

$http.post takes a 3rd parameter, a config object.  So try doing this:

$http.post(url, jQuery.param(payload), {

  headers:{

     'Content-Type':'application/x-www-form-urlencoded'

   }

}); 

http://docs.angularjs.org/api/ng.$http#post 

This is not clear at all without doing a lot of reading or familiarity with class hierarchy.

[kru...@seznam.cz]

I know about this, but you can't pass FormData object into jQuery param function and without param function it doesn't work either. I was thinking maybe a different header than urlencoded form? But I have no idea which one. What I am trying to do here is send FormData object, not just the usual data.

[alex]

$HttpProvider's default request transform function looks like this:

// transform outgoing request data

transformRequest: [function(d) {

  return isObject(d) && !isFile(d) ? toJson(d) : d;

}],

and isFile(d) basically tests that d.toString() === '[object File]'. so, angular is trying to tranform your formdata with toJson() which won't work I guess.

You could make $http.post() work with formdata by overriding the tranform function, e.g.:

$http.post(url, myformdata, {

  transformRequest: function(data) { return data /* data here is myformdata */ }

})

[alex]

more precisely, you'd do this (just tested it myself):

var payload = new FormData();

// populate payload

$http.post(postUrl, payload, {

  headers: { 'Content-Type': false },

  transformRequest: function(data) { return data; }

});

Default Content-Type is application/json if I'm not mistaken, and you can't set it manually to e.g. 'multipart/whatever' because if you're POSTing binary data (e.g. images) you'll need a boundary ID. Not setting Content-Type will make the underlying XHR browser implementation add a correct header, 'type; boundary'.

[Shannon Deminick]

@Alex you are a legend! 

'Content-type': false

is what I've been hunting for all day... no luck using multipart/form-data since when I was validating the request on the back end it was always missing the boundary parameter... bit of a zany (hidden) way to force it to send the right headers but works! thx!

[Jason Hostetter]

You were the last piece of the puzzle of at least 2 hours of googling. Thank you good sir.

[Eduardo Martins Barbosa]

Great solution, Alex.

But it stopped working for me after I upgraded to Angular 1.2.2.

To fix it, just change Content-Type to undefined instead of false.

var payload = new FormData();

// populate payload

$http.post(postUrl, payload, {

  headers: { 'Content-Type': undefined },

  transformRequest: function(data) { return data; }

});

[Milind Khandekar]

Eduardo, Alex, you guys rock!  A very, very happy new year to you guys.

[Charlie Martin]

I don't think I would have figured out to set the Content-type to undefined instead of false in a million years. Thank you!

[Ravi G Teja]

saved my day... :)