AngularJs Multipart $http Request Issue

Question

For some reason I can't get [object Object] out of the form. I'm using hte method found here: http://badwing.com/multipart-form-data-ajax-uploads-with-angularjs/#comment-431

The JSON i'm sending is pretty complicated (sample):

{
    "challenge_id": 262,
    "priority": "0",
    "cause_id": "29",
    "timestamp": "2013-11-29 12:06:01",
    "translations": {
        "en": {
            "name": "asdfgsfd",
            "description": "sdfghfs"
        }
    },
    "actions": {
        "1": {
            "type": "chek",
            "step": "1",
            "translations": {
                "en": {
                    "description": "adsfas"
                }
            }
        },
        "2": {
            "type": "chek",
            "step": "2",
            "translations": {
                "en": {
                    "description": "fsdgsd"
                }
            }
        }
    }
}

My response looks like this:

Content-Disposition: form-data; name="challenge_json"

[object Object]

My request looks like this:

        return $http.post( REQUEST_URL + '/ENDPOINT', {challenge_json:data}, {
        transformRequest: function(data) {
            console.log(data);
            var fd = new FormData();
            angular.forEach(data, function(value, key) {
                fd.append(key, value);
            });
            console.log(fd);
            return fd;
        }

Im modifying the headers with a httpProvider configuration change. But have tried doing it in line and am getting the same result. any help would be appreciated.

This question helped me greatly, getting it to work. However, I don't understand why there is a data option... stackoverflow.com/questions/18967307/… — flashpunk
– flashpunk, Commented Dec 4, 2013 at 17:02

user3922415 · Accepted Answer · 2014-08-08 13:04:04Z

It seems you were close to the solution, but needed to unset the 'content-type' header in the options passed to $http, so that the xmlhttprequest object can add it automatically when it gets a formdata on its send method.

https://groups.google.com/d/topic/angular/MBf8qvBpuVE/discussion

see a playground here http://jsfiddle.net/Lv1n55db/1/

(providing FormData object directly and a no-op transform, or your way of providing a normal data object and transforming it to FormData in transformRequest is no significant difference, the key is in the headers option)

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

It may vary with differnt browsers and different angularjs versions too. A more certain and stable approach, at least if you do not need file fields and such, could be to not use native FormData but implement the serialization to string yourself, as FormData polyfills do it.

Collectives™ on Stack Overflow

AngularJs Multipart $http Request Issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related