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

Question

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

SharpCoder · Accepted Answer · 2015-08-03 07:58:08Z

1

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);
    });


}

answered Aug 3, 2015 at 7:58

SharpCoder

19.3k44 gold badges165 silver badges261 bronze badges

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

3 Comments

user1157768 Over a year ago

Thank you @SharpCoder, Can you explain your suggested answer? for me to know how it works. Thanks

SharpCoder Over a year ago

@user1157768: Earlier you were sending only fd object. Now I have created another object called data. this data object had two proeprties fd & otherData. For this to work you have to change server side code as well. instead of expecting only fd or other object you will get another typeof object which will have both fd and other object which you were sending.

flip Over a year ago

I think your question is answered here: shazwazza.com/post/… (Just came across this when looking for info on doing this from a .Net client.)

Vanojx1 · Accepted Answer · 2015-08-03 07:58:27Z

0

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

answered Aug 3, 2015 at 7:58

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

Comments

Sky · Accepted Answer · 2018-02-27 02:36:40Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related