Different headers in Angularjs and JQuery, while POSTing to Web Api

Question

I am developing a little piece for uploading MULTIPLE PHOTOS using Asp.Net Web Api 2 for the server side and Angularjs for the client side. Somewhere along the way, I came across a piece of JQuery code which works perfectly fine, but when I simply write the exact same thing using Angularjs it behaves differently, from the server side's point of view. Here is a full description of what happens: So the following code, shows the web api piece:

public async Task<string> PostAsync()
        {
            List<string> str = new List<string>();

            if (Request.Content.IsMimeMultipartContent())
            {
                // CASE 1...
            }
            else
            {
                // CASE 2...
            }

            return str;
        }

So as you can see, the if statement separates the two cases that are causing me trouble. Now on the client side, if I use the following JQuery piece and hit the web api code, it always [successfully] ends up in CASE 1:

var data = new FormData();
        for (i = 0; i < files.length; i++) {
            data.append("file" + i, files[i]);
        }
        $.ajax({
            type: "POST",
            url: scope.serviceBase + "api/Property/PostAsync",
            contentType: false,
            processData: false,
            data: data,
            success: function (response) {
                alert(response);
            },
            error: function () {
                alert("Error while invoking the Web API");
            }
        });

but if I use the identical Angularjs way of writing that code, it always ends up in the CASE 2, which is a fail basically:

var data = new FormData();
            for (i = 0; i < files.length; i++) {
                data.append("file" + i, files[i]);
            }
http.post(scope.serviceBase + 'api/Property/PostAsync', data, { headers: {'Content-Type':'multipart/form-data'} }).success(function (response) {
                alert(response);
            })
            .error(function (response) {
                alert(response);
            });

Now what I have noticed using bullet points on the web api side, is that the "content-type" attribute that is sent to the server is different in the jquery and angular code. JQuery automatically adds a "content-type multipart/form-data boundary=blahblahblah..." header which angularJS doesn't.

Can you help me understand what is that piece and why is it added, also how can I make Angularjs send proper request so my server side code can end up in CASE 1?

David Conneely · Accepted Answer · 2015-08-17 14:21:19Z

1

AngularJS by default will try to transform your FormData object into JSON (see https://code.angularjs.org/1.4.4/docs/api/ng/service/$http#transforming-requests-and-responses). You can override this by supplying transformRequest: angular.identity in the options parameter (see https://code.angularjs.org/1.4.4/docs/api/ng/function/angular.identity).

I'm not sure why setting the 'Content-Type' header to "multipart/form-data" explicitly doesn't work in this case, but it looks like overriding Angular's default of "application/json" to undefined as suggested at https://code.angularjs.org/1.4.4/docs/api/ng/service/$http#setting-http-headers does the trick.

In summary, try the following:

$http.post(scope.serviceBase + 'api/Property/PostAsync', data,
        { transformRequest: angular.identity, headers: {'Content-Type':undefined} })

answered Aug 17, 2015 at 14:21

David Conneely

9667 silver badges9 bronze badges

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

1 Comment

Behrooz Over a year ago

Thanks! Worked perfectly :)

Collectives™ on Stack Overflow

Different headers in Angularjs and JQuery, while POSTing to Web Api

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related