Send formdata using angularjs http service

Question

I have to submit user form data. I have done this by using ajaxSubmit but its add one more new JS file into my application. I want to get this done by using angularjs http service. My question is that by using ajaxSubmit I need to send userId id request body and the form data is handle by the ajaxSubmit method itselft. I just want to send the data in a way that ajaxSubmit is doing.

HTML

<form role="form" action="profile_pic">
        <div class="cover-50 pull-left pos-relative upload-photo">
        <input type="file" onchange="angular.element(this).scope().uploadProfilePic(this)" accept="images/*" capture>
        <label>Upload Media</label>
        </div>
</form>

Controller

 $scope.uploadProfilePic = function(){
     $http({
     'method': 'POST',
      'url': /upload/user/image,
      'data': {
       'userId' : 457
      },
 });

// $form.ajaxSubmit({
   //     type : 'POST',
   //     url : '/upload/user/image',
   //     data : {
   //     'userId' : 457
   //     }
   //    });
}

Answer 1

You could use FormData() to append additional properties to send through $http post.

var data = new FormData();
data.append('userId', 457);
data.append('file', uploadFileUrl);
data.append('abc', "XYZ");

return $http.post('/upload/user/image', data, {
   transformRequest: angular.identity,
   headers: { 'Content-Type': undefined }
 }).then(function (results) {
  //results.data       
});