AngularJS: 405 error on uploading multiple images with multipart/form-data

Question

I'm facing 405 error upon uploading multiple files (images) via multipart/data-form. I'm able to send images in request and seems my payload showing correct data (boundaries). But I'm getting empty response 405 on (API) submit and response.status is showing 405 (method not allowed) error. I'm wondering what could be wrong as everything seems fine.

However i do suspect that this might be something to do with boundries in request-payload. I also come to know that browsers change MIME-TYPE when uploading and this conflicts with multipart/formData.

Please advise what could be wrong. Below is my code.

Directive (file-upload)

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });

        }
    };
}]);

View (html)

<form ng-submit="submit()">
    <input type="text" ng-model="for-param">
    <input type="text" ng-model="for-param">
    <input type="text" ng-model="for-param">

    <input type="file" file-model="image01">
    <input type="file" file-model="image02">

    <button type="submit">Save</button>
</form>

Controller (on-submit)

$scope.submit = function () {
    var params = {...};
    var data = {
        'frond-side-image' : $scope.image01,
        'back-side-image': $scope.image02
    };

    var formData = new $window.FormData();
    formData.append("image01", $scope.image01);
    formData.append("image02", $scope.image02);

    // Service
    $http({
        method: "POST",
        url: "api-url",
        headers: { "Content-Type": undefined },
        params: params,
        data: formData
    }).then(function (response) {
        console.log(response);
    }, function (error) {
        console.log(error);
    });
};

Based on above config I'm getting empty response, but I'm do getting 405 error which is method not allowed.

following is my Request Headers & Payloads

Header Request (after submit)

Content-Type: multipart/form-data; boundary=…--------------147472608521363

Request Payload

-----------------------------1363509831949
Content-Disposition: form-data; name="image01"

stacked_circles.png
-----------------------------1363509831949
Content-Disposition: form-data; name="image01"

stacked_circles.png
-----------------------------1363509831949--

In addition I also have tried to do this with XMLHttpRequest() and with that I'm also getting same 405 error with empty response.

var request = new XMLHttpRequest();
request.open('POST', url);
request.setRequestHeader('Content-Type', undefined);
request.send(formData);

Ref: stackoverflow

I'm now going to try with $ngResource and see if it can solve my issue.

Note: This API is working fine in POSTMAN

Note: Backend is in JAVA (spring)

Note: later on I'll convert image to base64 to upload on AWS (I'll just post image/base64 to backend than backend will upload it to AWS).