Angularjs $http not sending form data to the server

Question

The below code works if I use jquery ajax but $http of Angular doesn't send any data to the server using the code below:

myapp.factory('startCampFactory',function($http,$q,$rootScope){
  return {
    startNewCampaign : function(){

      var e = $("input#email");
      var email = e.val();
      var campname = $("input#campaignname").val();
      var about = $("textarea#about").val();
      var tamt = $("input#targetamount").val();
      var edate = $("input#enddate").val();
      var invitees = $("input#invitees").val();
      var file_data = $("#file").prop("files")[0];
      var form_data = new FormData();     

      form_data.append("file",file_data);
      form_data.append("email",email);
      form_data.append("campaignname",campname);
      form_data.append("about",about);
      form_data.append("targetamount",tamt);
      form_data.append("enddate",edate);
      form_data.append("invitees",invitees);

      console.log(email+about+campname);

      var deferred = $q.defer();

      $http({
           method:'POST',
           url:'/startcampaign',
           data:form_data,
           headers:
             {
               'Content-Type' :'application/x-www-form-urlencoded'
             }
        }).success(function(data,status,headers,config) { 
          $rootScope.$apply( function() { 
          deferred.resolve(); 
        });
     }).error(function(){
        $rootScope.$apply(function() 
          { 
            deferred.reject();
          }); 
     });
     return deferred.promise;
   }
});

How do you invoke this service? $http automatically return Promise you don't need to do that... — bingjie2680
– bingjie2680, Commented Sep 28, 2013 at 7:36
@rohit if you find the solution post that let others will know about it — Satish
– Satish, Commented Jan 6, 2014 at 10:59
I don't understand why this post has been downvoted : it's a common issue that can be found in web — Fedeco
– Fedeco, Commented Dec 2, 2016 at 13:10

Isha Aggarwal · Accepted Answer · 2015-04-27 07:55:07Z

2

Try something like this :

.service('fileUpload', ['$http', function ($http) {
  this.uploadFileToUrl = function(file, uploadUrl){
    var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
    })
    .error(function(){
    });
  }
}]);

Refer this link for explanation :

http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

edited Apr 27, 2015 at 7:55

answered Apr 7, 2015 at 7:11

Isha Aggarwal

4421 gold badge5 silver badges15 bronze badges

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

2 Comments

Tay2510 Over a year ago

Please refrain from posting a link-only answer since the link might be unavailable someday. Instead, you could digest the content and answer with your own words, and then cite the link as a reference.

Isha Aggarwal Over a year ago

@Tay2510 : Made the changes. Thanks for your feedback. :)

Community · Accepted Answer · 2017-05-23 12:26:01Z

0

I had no luck with this either, and ending up using jQuery.ajax (although I was using jsonp).

See How can I post data as form data instead of a request payload?

Perhaps "And the data passed should be converted to a string" is relevant.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Sep 28, 2013 at 8:56

peterorum

1,4412 gold badges16 silver badges21 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:23Z

0

data in jQuery's $.ajax does not correspond to datain Angular's $http.get/post. You may have to use params instead of data in Angular. Have you looked at this:

jQuery ajax request works, same AngularJS ajax request doesn't

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Sep 28, 2013 at 10:16

Miichi

1,7791 gold badge14 silver badges16 bronze badges

Comments

Satish · Accepted Answer · 2014-01-06 10:57:43Z

0

the problem is occurring due to content type, remove the headers part or add

    contentType:false or 'multipart/form-data'

      $http({
        method:'POST',
        url:'url'
        data:formData,
        contentType:false,
        processData: false
    }).
    then(function(result) {
        alert(result);
    });

answered Jan 6, 2014 at 10:57

Satish

5372 gold badges9 silver badges21 bronze badges

1 Comment

Morteza Ziyaeimehr Over a year ago

No, this code didn't work. Content-Type should be in headers (headers:{ 'Content-Type': '...'} ) in angularjs. Also i'm not sure about processData.

Collectives™ on Stack Overflow

Angularjs $http not sending form data to the server

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related