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?

Júlio Pradera · Accepted Answer · 2016-01-25 13:37:25Z

12

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.

answered Jan 25, 2016 at 13:37

Júlio Pradera

4822 gold badges9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DKR · Accepted Answer · 2019-03-29 05:01:19Z

1

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

answered Mar 29, 2019 at 5:01

DKR

5,8162 gold badges22 silver badges21 bronze badges

1 Comment

Zokor Over a year ago

Best answer... :)

Giuliano · Accepted Answer · 2016-01-25 00:11:34Z

0

Why are you deleting content-type in transformRequest if you're parsing it through the property "header"?

Did you try to not delete content-type?

answered Jan 25, 2016 at 0:11

Giuliano

1298 bronze badges

5 Comments

Júlio Pradera Over a year ago

The answer is simple: I copied the code. =) And yes, I've tried not delete. But nothing has changed. The error continues.

Giuliano Over a year ago

It's something coming from PHP. Maybe because the php file is empty. Try to capture the files with $_FILES or something like that. Also, can you share a code of the php file you're using in other projects?

Júlio Pradera Over a year ago

That was the first thing I did. When I tested for the first time, the PHP script had been finalized. When I saw it was not working, I started to commenting the code to find out where was the error. The problem is that I just commenting the whole script and the error remained. I have also tried to empty the cache and use CCleaner, but nothing changed.

Giuliano Over a year ago

Julio, I already tested it and it works. I used <input type="file" name="carousels" ng-model="carousels" multiple> inside of <form ng-controller="carousels" ng-submit="save()"> and I get the response from PHP, which is <?php echo 'hola world';

Júlio Pradera Over a year ago

I added an example of my form (just removed the other inputs). I'm using the plugins "jasny-bootstrap" and "ng-file-upload" as I always use. As I said, the only difference is that this time I'm using the UI-Router in place of ngRouter, but I can not find a connection in both nowhere.

Jeffrey Roosendaal · Accepted Answer · 2016-12-22 11:25:20Z

-3

Instead of sending the data as multipart/form-data:

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

You should send it as application/json:

headers: {
    'Content-Type': 'application/json'
}

In case the problem still persists, you may also want to change data to params.

answered Dec 22, 2016 at 11:25

Jeffrey Roosendaal

7,1978 gold badges45 silver badges58 bronze badges

1 Comment

Rafael Herscovici Over a year ago

There is a big difference between the two.

Collectives™ on Stack Overflow

AngularJS - Missing boundary in multipart/form-data POST

4 Answers 4

Comments

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related