CODEWITHSUNDEEP
jqueryangularjshttp-headersform-data
user1157768
user1157768

Reputation: 53

Uploading files Formdata and JSON data in the same request with Angular JS

How to combine my two $http.post into single http post?

$scope.myMethod = function(){
    var fd = new FormData();
    angular.forEach($scope.files, function(file){
        fd.append('file', file);
    });

    $http.post('my_url', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).success(function(result){
        console.log(result);
    });

    $http.post('my_url', {imgx: $scope.imgx, imgy: $scope.imgy, imgh: $scope.imgh, imgw: $scope.imgw}).success(
        function(data){
        console.log(data);
    });
}

any help is very appreciated, Thank you

Upvotes: 1

Views: 3349

Answers (3)

Sky
Sky

Reputation: 7711

This is how I did and worked for me.

In frontend:

return $http({
        method: 'POST',
        url: url,
        headers: { 'Content-Type': undefined },
        transformRequest: function (data) {
            var formData = new FormData();
            formData.append("name", data.name);
            for (var i = 0; i < data.files.length; i++) {
                formData.append("content", data.files[i]);
            }
            return formData;
        },
        data: { name: name, files: files }
    });

In server side, just the normal way retrieving the parameters depending on the language you use, I'm using NodeJS, this is how it looks like:

var name = req.body.name;
req.file('content').upload(...);

I referenced this. It took me lots of time getting this work because of my mistake. Hope this would help anyone who needs this and for a record as well.

Upvotes: 0

Vanojx1
Vanojx1

Reputation: 5584

without combine them you can listen to the 2 promises like this:

var promise1 = $http.post('my_url', fd, { .....

var promise2 = $http.post('my_url', {imgx: $scope.imgx, ......

$q.all([promise1,promise2]).then(function(response){ console.log(response); });

angular $q documentation

Upvotes: 0

SharpCoder
SharpCoder

Reputation: 19199

try something like this:

$scope.myMethod = function(){
    var fd = new FormData();
    angular.forEach($scope.files, function(file){
        fd.append('file', file);
    });

var data = {};
    data.fd = fd;
    data.otherData  =   {imgx: $scope.imgx, imgy: $scope.imgy, imgh: $scope.imgh, imgw: $scope.imgw};  

    $http.post('my_url', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).success(function(result){
        console.log(result);
    });


}

Upvotes: 1

Related Questions