Angular post array object

Question

I am trying to post a object array, I expect the post to post JSON like so

{"campaign":"ben",
"slots":[
      {                        
     "base_image": "base64 code here"
      }
       ]
}

When I post I get this in the console

angular.js:9866 POST /ccuploader/Campaign/updateSlots 413 (Payload Too Large) (anonymous) @ angular.js:9866 n @ angular.js:9667 f @ angular.js:9383 (anonymous) @ angular.js:13248 $eval @ angular.js:14466 $digest @ angular.js:14282 $apply @ angular.js:14571 (anonymous) @ angular.js:21571 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3 app.js:71 failed

Im not sure why my post is not working. Can someone point out my mistake ?

JavaScript code

 $scope.SaveImage = function () {
        $http({
            url: "http://www.somesite.co.uk/ccuploader/Campaign/updateSlots",
            method: "POST",
            data: $.param({ 'campaign': "name", 'slots': $scope.slots }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function (response) {
            // success
            console.log('success');
            console.log("then : " + JSON.stringify(response));
        }, function (response) { // optional
            // failed
            console.log('failed');
            console.log(JSON.stringify(response));
        });
    };

Why are you using ` $.param()`. And **post** means which post? electricity post? or letter post or $http post? :O — Ramesh Rajendran, Sep 25 '17 at 12:09

score 0 · Accepted Answer · edited Sep 25 '17 at 12:31

Seems you are sending a base64 string on the POST request. Most web servers have a max POST limit. You should configure your server to allow large POST params. Implementation is different from server to server.

If your server is using PHP refer this.
Increasing the maximum post size

Also it is better if you can upload images by chunking them. There are lot of libraries that does it. Otherwise your browser will hang and the request will eventually timeout. That's called the multipart upload.

You can upload GBs of images without no problem with multipart upload mechanism.

UPDATE

Also without using the $.param function just pass the parameters directly to the data object. Since the payload is heavy the $.param may throw this exception when it's trying to parse the request.

$scope.SaveImage = function () {
        $http({
            url: "http://www.somesite.co.uk/ccuploader/Campaign/updateSlots",
            method: "POST",
            data: { 
                  campaign: "name",
                  slots: $scope.slots
            }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function (response) {
            // success
            console.log('success');
            console.log("then : " + JSON.stringify(response));
        }, function (response) { // optional
            // failed
            console.log('failed');
            console.log(JSON.stringify(response));
        });

Thanks, Ill look into 'multipart', I am able to post from postman but unable to through my browser, would configuring my server to accept higher limit still be the problem ? — Beep, Sep 25 '17 at 12:20
Nice, thanks, just ran it still getting 413 (Payload Too Large) but ill see about increasing the max size on the server — Beep, Sep 25 '17 at 13:38

Angular post array object

1 Answers1