title: Ionic-Angular.js Taking pictures & sending to server: null images
body: <p>So I have managed to use a custom directive to upload images to my server, through Angular.js.
  I have also managed to implement the camera functionality from Cordova.
  Now I am trying to connect the two, but when sending images to the server, they get stored as null. I believe the problem lies in the fact that I was using an input field to get the image, and it was getting the full Object, and now I am getting just the image path after I take the picture and send it. My problem is, I don't really understand how I could convert the path to an Object, IF that is the problem?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;form class="form-horizontal" role="form"&gt;
      &lt;button class="picButton" ng-click="getPhoto()" class="button button-block button-primary"&gt;Take Photo&lt;/button&gt;
      &lt;img ng-src="{{lastPhoto}}" style="max-width: 100%"&gt;
  ...
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>$scope.getPhoto = function() {
      Camera.getPicture().then(function(imageURI) {
          console.log(imageURI);
          $scope.lastPhoto = imageURI;
          $scope.upload(); &lt;-- call to upload the pic
      },
      function(err) {
          console.err(err);
      }, {
          quality: 75,
          targetWidth: 320,
          targetHeight: 320,
          saveToPhotoAlbum: false
      });
  };
  
  $scope.upload = function() {
      var url = '';
      var fd = new FormData();
  
      //previously I had this
      //angular.forEach($scope.files, function(file){
          //fd.append('image',file)
      //});
  
      fd.append('image', $scope.lastPhoto);
  
      $http.post(url, fd, {
  
          transformRequest:angular.identity,
          headers:{'Content-Type':undefined
          }
      })
      .success(function(data, status, headers){
          $scope.imageURL = data.resource_uri; //set it to the response we get
      })
      .error(function(data, status, headers){
  
      })
  }
  </code></pre>
  
  <p>When printing $scope.lastPhoto I get the image path: <em>file:///var/mobile/Applications/../tmp/filename.jpg</em></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Request Headers:</p>
  
  <pre><code>------WebKitFormBoundaryEzXidt71U741Mc45
  Content-Disposition: form-data; name="image"
  
  file:///var/mobile/Applications/C65C8030-33BF-4BBB-B2BB-7ECEC86E87A7/tmp/cdv_photo_015.jpg
  ------WebKitFormBoundaryEzXidt71U741Mc45--
  </code></pre>
  
  <p>Should this causing the problem? Since I can see I am sending the path but not the image itself..</p>
  
  <p>Before changing, I was using a custom directive, and was using $scope.files to append to my request in the upload function:</p>
  
  <pre><code>&lt;input type="file" file-input="files" multiple  onchange="angular.element(this).scope().filesChanged(this);upload();"&gt;
  &lt;button ng-click="upload()"&gt;Upload&lt;/button&gt;
  </code></pre>