AngularJS - Missing boundary in multipart/form-data POST

Question

I have the following code:

app.controller("carousels", function($http, $location, $rootScope, $state, $stateParams, $scope, PopUp, DTColumnDefBuilder, DTOptionsBuilder) {

    { ... }

    $scope.save = function() {
        $http({
            method: "POST",
            url: "./controllers/carousels/create.php",
            headers: {
                "Content-Type": "multipart/form-data"
            },
            data: $scope.carousels,
            transformRequest: function (data, headersGetter) {
                var formData = new FormData(),
                    headers = headersGetter();

                angular.forEach(data, function (value, key) {
                    formData.append(key, value);
                });

                delete headers["Content-Type"];

                return formData;
            }
        }).success(function(response) {
            console.log(response);
        });
    };
});

The create.php file is completely empty and save function is called by ng-submit on the form tag.

<form name="form" ng-submit="save()">
    <div class="box box-default">
        <div class="box-header with-border"></div>

        <div class="box-body">
            <div class="form-group" has-error>
                <label for="image">{{ "txt.pages.carousels.fields.image" | translate }}*</label>
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div style="display: table-row;">
                        <div class="form-control" data-trigger="fileinput">
                            <i class="glyphicon glyphicon-file fileinput-exists"></i>
                            <span class="fileinput-filename"></span>
                        </div>
                        <span class="btn btn-default btn-file input-group-addon">
                            <span>{{ "txt.action.file" | translate }}</span>
                            <input type="file" accept="image/*" name="image" id="image" ng-model="carousels.image" ngf-select required>
                        </span>
                    </div>

                    <div class="fileinput-preview thumbnail" data-trigger="fileinput">
                        <img ng-src="./uploads/{{ carousels.image }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="box-footer">
            <button type="submit" class="btn btn-default">{{ "txt.action.save" | translate }}</button>
        </div>
    </div>
</form>

After submitting the form, the console returns the following message:

Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0

This code always worked properly in all my projects, but this time is giving this error and I'm unable to find a solution.
The only difference between this project and others, is that in this I am using UI-Router. I tried to look for a connection between them, but I found nothing.

Does anyone know what might be causing this error and how to fix it?

Answer 1

After a long time and looking at various functions over the Internet, just changed the header:

headers: {
    "Content-Type": "multipart/form-data"
},

To:

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

And the code again function normally.

Thank you for the help.

Answer 2

I have resolve my issue to remove Content-Type from header and its working perfectly