title: AngularJS uploading pictures with formdata
body: <p>I am trying to post picture as part of formData to my client backend API taking in consideration that the API allow me only to send files as part of form data with no URL to upload the physical file. Below is the code I am using so far, I've also tried some Angular file upload modules ex. Angular file upload but none that I can find to help me to post the file as part of form data (multipart/ form data) as all expect a URL to upload the physical file. Can someone help me please find a way to post pictures / files as form data OR tell me what exactly I am doing wrong in my code below? Thanks</p>
  
  <p>Service method used in posting:</p>
  
  <pre><code>       var deferred = $q.defer();
         $http({ method:'POST',
                 url:'http://localhost/api/clients.php',
                 data: {
                      action: 'updateClient',
                      img: pictureFile
                 },
                 transformRequest: angular.identity,
                 headers: {  'Content-Type': 'multipart/form-data',
                             'Token': '1234567890'
                          }
               }).success(function(data,status,headers,config){
                   deferred.resolve(data);
               }).error(function(data,status,headers,config){ 
                  deferred.reject(status);
               });
  
         return deferred.promise   
  </code></pre>
  
  <p>Form.html</p>
  
  <pre><code>&lt;form name="clientForm"&gt;
   &lt;fieldset&gt;
     &lt;input id="name" type="text" placeholder="Name" ng-model="client.name"&gt;
     &lt;input type="file" file-model="pictureFile"/&gt;
   &lt;/fieldset&gt;
   &lt;button type="submit" ng-click="updateClient(client, pictureFile)"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Directive</p>
  
  <pre><code>directive('fileModel', ['$parse', function ($parse) {
      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>