angularjs - Sending an image via a post request from an Ionic app to a rails endpoint -
i working on ionic mobile application take photos, attach location , send them inside post request rails endpoint. after looking @ link , link , countless others, have been unable find solid information on implementing particular feature.
i can upload photos through browser using html input form, added database , displayed on app via request.
however @ moment when taking photo on phone , attempting send via post request directly app, location information being received, image not being correctly encoded.
here json data has been received, returning "image_url":"/images/main/missing.png".
{ "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" } here code:
angular factory making post request:
.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; }) angular controller taking photo:
.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 + '&sensor=true') .success(function(data) { var home = data.results[0].address_components; (var = 0; < home.length; i++) { if(home[i].types.indexof("administrative_area_level_2") > -1) { $scope.city = home[i].long_name; break; }; }; (var = 0; < home.length; i++) { if(home[i].types.indexof('country') > -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) { }); } post controller rails database:
class postscontroller < applicationcontroller skip_before_filter :verify_authenticity_token def index @posts = post.all render json: @posts, :callback => params['callback'], :content_type => 'application/javascript', :methods => [: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 i have not done great deal of work ionic framework please forgive ignorance. appreciated.
managed solve using cordovafiletransfer.upload method.
the rails end point filtering params , looking post object, image string, , image string being provided.
the following code working
angular factory making post request:
.factory('posts', function($http, $cordovafiletransfer) { var o = { posts: [] }; o.getall = function() { return $http.get('https://shielded-hamlet-4665.herokuapp.com/posts').success(function(data) { angular.copy(data, o.posts); }); }; o.addpost = function(post) { var options = { filekey: "image", filename: "image.jpeg", chunkedmode: false, mimetype: "image/jpeg", params: { city: post.city, country: post.country, lat: post.lat, lon: post.lon } }; $cordovafiletransfer.upload('http://shielded-hamlet-4665.herokuapp.com/posts', post.image, options) .then(function(result){ console.log("code = ok"); }, function(error){ console.log("code = " + error); }, function(progress){}); }; return o; }) angular controller taking photo:
.controller("cameractrl", function($scope, $cordovacamera, $http, posts) { post = {}; 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) { post.lat = position.coords.latitude; post.lon = position.coords.longitude; $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng=' + post.lat +',' + post.lon + '&sensor=true') .success(function(data) { var home = data.results[0].address_components; (var = 0; < home.length; i++) { if(home[i].types.indexof("administrative_area_level_2") > -1) { post.city = home[i].long_name; break; }; }; (var = 0; < home.length; i++) { if(home[i].types.indexof('country') > -1) { post.country = home[i].long_name; break; }; }; }) }; $scope.takepicture = function() { navigator.geolocation.getcurrentposition(getloccoords); $cordovacamera.getpicture(options).then(function(imagedata) { post.image = imagedata; posts.addpost(post); }, function(err) {}); }; }); post controller rails database:
class postscontroller < applicationcontroller skip_before_filter :verify_authenticity_token def index @posts = post.all render json: @posts, :callback => params['callback'], :content_type => 'application/javascript', :methods => [:image_url] end def new @post = post.new end def create post.create(post_params) redirect_to '/posts' end def post_params params.permit(:city, :country, :image, :lat, :lon) end end
Comments
Post a Comment