title: Sending an image via a post request from an Ionic app to a rails endpoint
body: <p>I am currently working on an Ionic mobile application which will eventually take photos, attach a location and send them inside a post request to a rails endpoint. After looking at this <a href="http://forum.ionicframework.com/t/how-to-make-uploading-files-or-images-using-ionicframwork-or-angularjs/391" rel="nofollow">link</a> and this <a href="https://blog.nraboy.com/2014/09/use-android-ios-camera-ionic-framework/" rel="nofollow">link</a> and countless others, I have been unable to find any solid information on implementing this particular feature.</p>
  
  <p>I can upload photos through the browser using a html input form, which is then added to the database and is displayed on the app via a get request. </p>
  
  <p>However at the moment when taking a photo on the phone and attempting to send it via a post request directly from the app, only the location information is being received, the image is not being correctly encoded.</p>
  
  <p>Here is the jSON data that has been received, its returning <code>"image_url":"/images/main/missing.png"</code>.</p>
  
  <pre><code>    { "id":6,"city":"Greater London",
        "country":"United Kingdom","created_at":"2015-05-14T21:22:22.825Z",
        "updated_at":"2015-05-14T21:22:22.825Z","image_file_name":null,
        "image_content_type":null,"image_file_size":null,
        "image_updated_at":null,"image_url":"/images/main/missing.png" }
  </code></pre>
  
  <p>Here is the code:</p>
  
  <p><strong>Angular factory making post request:</strong></p>
  
  <pre><code>.factory('Posts', function($http) {
  
    var o = { posts: [] };
  
    o.getAll = function() {
      return  $http.get('http://localhost:8100/posts').success(function(data) {
        angular.copy(data, o.posts);
      });
    };
  
    o.addPost = function(post) {
      return $http.post('https://shielded-hamlet-4665.herokuapp.com/posts', post);
    };
  
    return o;
  })
  </code></pre>
  
  <p><strong>Angular Controller taking photo:</strong></p>
  
  <pre><code>.controller("CameraCtrl", function($scope, $cordovaCamera, $http, Posts) {
  
    var id = 0;
  
    var options = { 
      quality : 75, 
      destinationType : Camera.DestinationType.FILE_URI, 
      sourceType : 1, 
      allowEdit : true,
      encodingType: 0,
      targetWidth: 380,
      targetHeight: 450,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    };
  
    function getLocCoords(position) {
      $scope.lat = position.coords.latitude;
      $scope.lon = position.coords.longitude;
  
      $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng=' + $scope.lat +',' + $scope.lon + '&amp;sensor=true')
        .success(function(data) {
  
          var home = data.results[0].address_components;
  
          for (var i = 0; i &lt; home.length; i++) {
            if(home[i].types.indexOf("administrative_area_level_2") &gt; -1) {
              $scope.city = home[i].long_name;
              break;
            };
          };
  
          for (var i = 0; i &lt; home.length; i++) {
            if(home[i].types.indexOf('country') &gt; -1) {
              $scope.country = home[i].long_name;
              break;
            };
          };
        })
    };
  
    $scope.takePicture = function() {
  
      navigator.geolocation.getCurrentPosition(getLocCoords);
  
      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.imgURI = imageData;
        id ++;
        var post = { id: id, country: $scope.country, city: $scope.city, image: $scope.imgURI, likes: 0, comments: [] }
        Posts.addPost(post);
      }, function(err) {
  
      });
    }
  </code></pre>
  
  <p>Post Controller from the Rails Database:</p>
  
  <pre><code>class PostsController &lt; ApplicationController
  
    skip_before_filter :verify_authenticity_token
  
    def index
      @posts = Post.all
      render json: @posts, :callback =&gt; params['callback'], :content_type =&gt; 'application/javascript', :methods =&gt; [:image_url]
    end
  
    def new
      @post = Post.new
    end
  
    def create
      Post.create(post_params)
      redirect_to '/posts'
    end
  
    def post_params
      params.require(:post).permit(:city, :country, :image)
    end
  
  end
  </code></pre>
  
  <p>I have not done a great deal of work with the ionic framework so please forgive my ignorance. Any help would be greatly appreciated.</p>