sending FormData with angular $http

Question

I'm writing an angular-1.5.0-rc0 application

In this application I create FormData, fill it with values and I need to send it with $http request. for now I use jquery ajax with the following code:

this.addDrink = function () {
        var data = new FormData();
        var drinkBrand = caller.drink.drinkBrand;
        var drinkType = caller.drink.drinkType;
        var drinkFlavor = caller.drink.drinkFlavor;
        var liquidColor = caller.drink.liquidColor;
        var drinkCompany = caller.drink.drinkCompany;
        var liquidIsTransparent = caller.drink.liquidIsTransparent;
        var drinkImage = caller.drink.drinkImage;
        var caloriesFor100g = caller.drink.caloriesFor100g;
        var alcoholSum = caller.drink.alcoholSum;
        var alcoholSumType = caller.drink.alcoholSumType;
        data.append('alcohol_sum_type', alcoholSumType);
        data.append('drink_brand', drinkBrand);
        data.append('drink_type', drinkType);
        data.append('drink_flavor', drinkFlavor);
        data.append('liquid_color', liquidColor);
        data.append('liquid_is_transparent', liquidIsTransparent);
        data.append('drink_image', drinkImage);
        data.append('drink_company', drinkCompany);
        data.append('calories_for_100g', caloriesFor100g);
        data.append('alcohol_sum', alcoholSum);
        $.ajax({
            url: 'https://api.myalcoholist.com:8888/drink',
            data: data,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function (data) {
                if (!data.success) {
                    alert(data.data);
                } else {
                    alert('done');
                }
            }
        });
    };

as you can see I set processData and ContentType to false in order to be able to send FormData in jquery ajax call. how can it be done with $http?

thanks @AnikIslamAbhi but it seems that the example there is for sending json data. i want to send FormData since i'm also attaching an image — ufk
– ufk, Commented Dec 28, 2015 at 6:55
You can use some 3rd party lib to facilitate file uploads, i.e. ng-file-upload. — fracz
– fracz, Commented Dec 28, 2015 at 7:45

ufk · Accepted Answer · 2016-01-03 16:34:59Z

3

$scope.addDrink = function(files) {

// append all what u want.

$http.post('https://api.myalcoholist.com:8888/drink', data, {       
    headers: {'Content-Type': undefined },
    transformRequest: angular.identity
}).success( ...all right!... ).error( ..damn!... );

};

edited Jan 3, 2016 at 16:34

ufk

32.4k74 gold badges258 silver badges422 bronze badges

answered Dec 28, 2015 at 7:36

Paulo Galdo Sandoval

2,2036 gold badges30 silver badges44 bronze badges

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

1 Comment

elporfirio Over a year ago

This works great, Most important thing to consider (if you forgot read the original question). Transform your ng-model to formData Object. Systems made with .net need this type of convertion, i Dunno why. :P

Collectives™ on Stack Overflow

sending FormData with angular $http

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related