AngularJS - Missing boundary in multipart/form-data POST
<p>I have the following code:</p>

<pre><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);
        });
    };
});
</code></pre>

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

<pre><code>&lt;form name="form" ng-submit="save()"&gt;
    &lt;div class="box box-default"&gt;
        &lt;div class="box-header with-border"&gt;&lt;/div&gt;

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

                    &lt;div class="fileinput-preview thumbnail" data-trigger="fileinput"&gt;
                        &lt;img ng-src="./uploads/{{ carousels.image }}"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

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

<p>After submitting the form, the console returns the following message:</p>

<blockquote>
  <p><b>Warning</b>:  Missing boundary in multipart/form-data POST data in <b>Unknown</b> on line <b>0</b><br /></p>
</blockquote>

<p>This code always worked properly in all my projects, but this time is giving this error and I'm unable to find a solution.<br>
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.</p>

<p>Does anyone know what might be causing this error and how to fix it?</p>