Send FormData with other field in AngularJS
<p>I have a form with two <code>input text</code> and one <code>upload</code>. I have to send it to the server but I have some problem concatenating the file with the text. The server expects this answer:</p>

<pre><code>"title=first_input" "text=second_input" "file=my_file.pdf"
</code></pre>

<p>This is the <strong>html</strong>:</p>

<pre><code>&lt;input type="text" ng-model="title"&gt;
&lt;input type="text" ng-model="text"&gt;
&lt;input type="file" file-model="myFile"/&gt;
&lt;button ng-click="send()"&gt;
</code></pre>

<p>This is the <strong>Controller</strong>:</p>

<pre><code>$scope.title = null;
$scope.text = null;

$scope.send = function(){
  var file = $scope.myFile;
  var uploadUrl = 'my_url';
  blockUI.start();
  Add.uploadFileToUrl(file, $scope.newPost.title, $scope.newPost.text, uploadUrl);
};
</code></pre>

<p>This is the <strong>Directive</strong> fileModel:</p>

<pre><code>  return {
restrict: 'A',
link: function(scope, element, attrs) {
  var model = $parse(attrs.fileModel);
  var modelSetter = model.assign;

  element.bind('change', function(){
    scope.$apply(function(){
      modelSetter(scope, element[0].files[0]);
    });
  });
}
};
</code></pre>

<p>And this is the <strong>Service</strong> which call the server:</p>

<pre><code>  this.uploadFileToUrl = function(file, title, text, uploadUrl){
   var fd = new FormData();
   fd.append('file', file);
   var obj = {
     title: title,
     text: text,
     file: fd
   };
   var newObj = JSON.stringify(obj);

     $http.post(uploadUrl, newObj, {
       transformRequest: angular.identity,
       headers: {'Content-Type': 'multipart/form-data'}
     })
  .success(function(){
    blockUI.stop();
  })
  .error(function(error){
    toaster.pop('error', 'Errore', error);
  });
}
</code></pre>

<p>If I try to send, I get Error 400, and the response is: <code>Multipart form parse error - Invalid boundary in multipart: None</code>.
The Payload of Request is: <code>{"title":"sadf","text":"sdfsadf","file":{}}</code></p>