Using angular js post to django back end yields a 414 error

Question

        var reader = new FileReader();
        reader.onload = function(){
            var fileData = reader.result;

            $http({
                url: 'rs/submit',
                method: 'POST',
                data: {
                    'img': fileData,
                    'query': query,
                    'limit': limit
                }
            })
            .then(function successCallback(response) {

            }, function errorCallback(response) {

            });
        };
        reader.readAsDataURL(document.getElementById('submitFileInput').files[0]);

I'm trying to send a image to my django back end using angular js as you can see above, but I get a error in the back end that says:

[22/Dec/2018 12:59:34] "POST /dynamic-mosaic/rs/submit HTTP/1.1" 200 4

[22/Dec/2018 12:59:34] code 414, message Request-URI Too Long

[22/Dec/2018 12:59:34] "" 414 -

I thought POST can send requests of almost any size, the image isnt even that big like 1-2MB

Anyone knows the cause? Maybe I'm not using angular js $http service properly.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Saving Blob type is a bit different

var fd = new FormData();
fd.append('img', reader.result);
fd.append('query', query);
fd.append('limit', limit);
                
$http.post('rs/submit', fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
}).then(...)

Probably you should also consider similar answer

UPD: here is an external resource for your consideration

Angular’s default transformRequest function will try to serialize our FormData object, so we override it with the identity function to leave the data intact.

Angular’s default Content-Type header for POST and PUT requests is application/json, so we want to change this, too. By setting ‘Content-Type’: undefined, the browser sets the Content-Type to multipart/form-data for us and fills in the correct boundary. Manually setting ‘Content-Type’: multipart/form-data will fail to fill in the boundary parameter of the request.

this works but can you explain me what { transformRequest: angular.identity, headers: {'Content-Type': undefined} } does? it seem not to work without these — , Dec 22 '18 at 13:06

Using angular js post to django back end yields a 414 error

1 Answers1