FormData boundary missing from content-type in POST request header

Question

I'm using the same code as I've used successfully in a similar project for file uploads, yet for some reason the boundary never gets added to the content-type property in the request header. This results in my C# web-api function not being able to detect the image.

This is my post request using angularjs:

var formData = new FormData($('#testform')[0]);

$http({
    url: serviceBase + 'api/Client/' + item.practiceID + '/SavePhoto',
    method: "POST",
    data: formData,
    headers: { 'Content-Type': false },       
    transformRequest: function (data) { return data; }
}).success(function (response) {      
}).error(function () {  
});

This is what the request looks like:

Request URL:http://localhost:56769/api/Client/178/SavePhoto
Request Headers
Provisional headers are shown
Accept:application/json, text/plain, */*
Authorization:Bearer JfDnrAIkSttZ8GnHa-Wo9wBH-HVWpbiUgGSic11DF_OlTgseuTPgTisxybvEyw2fEyer1FJ7DjKWqK15P-ZdhO_X1aHp7-GiIW2Q4BTF5svTyJKWtM2jk-XEN6qXuEIhAi6-phryd_LlGLOlLMYMKhQZGULxdyk_dUvDGt6bY5Z0L-LbV5uc74q3MyLMMj_vypNgbFCAxGEAGeeeGlP7jwlyyz7EY-eRfRhXxjFqOjI
Content-Type:false
Origin:http://localhost:58431
Referer:http://localhost:58431/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Request Payload
------WebKitFormBoundary6padOMi9aJxqx34h
Content-Disposition: form-data; name="profile-photo"; filename="Jellyfish.jpg"
Content-Type: image/jpeg
------WebKitFormBoundary6padOMi9aJxqx34h--

Does anyone know what might be causing the boundary to fail to generate in the content-type parameter?

Answer 1

Try passing the Content-Type header as undefined instead of false:

headers: { 'Content-Type': undefined }