Manipulating data with Angular's array object

Question

Manipulating data with Angular's array object

I am having an issue with posting an object array. I anticipate the post to be in JSON format like this:

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

However, when I attempt to post, I receive this error 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

I am unsure of why my post is not successful. Could someone please help me identify my mistake?

This is my 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));
        });
    };

javascript angularjs json http post

Answer 1

Answer №1

It appears that you are transmitting a base64 encoded string using the POST request. Most web servers impose a limit on the size of POST data. To avoid issues, ensure your server is configured to allow large POST parameters. The implementation may vary depending on the server.

If you are working with a PHP server, you can refer to this guide:
Increasing the maximum post size

For uploading images, consider chunking them instead of sending all at once. There are libraries available for this purpose to prevent browser hang and request timeout, known as multipart upload.

You can successfully upload large amounts of image data using the multipart upload mechanism without any issues.

UPDATE

When sending heavy payloads, avoid using the $.param function to directly pass parameters to the data object. Using $.param might lead to exceptions during request parsing due to the heavy payload.

$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));
        });

Answer 2

It appears that you are transmitting a base64 encoded string using the POST request. Most web servers impose a limit on the size of POST data. To avoid issues, ensure your server is configured to allow large POST parameters. The implementation may vary depending on the server.

If you are working with a PHP server, you can refer to this guide:
Increasing the maximum post size

For uploading images, consider chunking them instead of sending all at once. There are libraries available for this purpose to prevent browser hang and request timeout, known as multipart upload.

You can successfully upload large amounts of image data using the multipart upload mechanism without any issues.

UPDATE

When sending heavy payloads, avoid using the $.param function to directly pass parameters to the data object. Using $.param might lead to exceptions during request parsing due to the heavy payload.

$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));
        });

Manipulating data with Angular's array object

Answer №1

Similar questions

What are the best practices for securely storing a distinctive client identifier for websockets?

What are the steps to adjust the size of the Facebook "like" button?

Tips for halting the navigation bar when scrolling

The Angular CLI encountered a 404 Not Found error while attempting to load the symbol-observable at http://localhost:4200

After clicking on the checkbox, req.body.task becomes undefined

Despite containing data, the JSON object continues to display as undefined

Attempting to conceal a div element along with its contents using AngularJS

What is the best way to structure a hierarchy in an array or object data using Node.js?

Is there a way to convert the text within a div from Spanish to English using angular.js?

Can jQuery Autocomplete function without stopping at white spaces?

Shifting HTML table in Javascript by toggling checkboxes

Understanding the discrepancy between functional and error when parsing JSON with Pandas

Combining Rails with AngularJS seamlessly

Having trouble with publishing to npm as public with the --access flag not functioning properly?

Verify the presence of values in several textarea fields with jQuery before executing a specified action

Leveraging Ajax data within a Python script

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

Transferring a Query between Domains with the Help of JavaScript

CSS - using numbers to create dynamic background images

I need to link the click function to the li components within the xpages autocomplete feature