cordova - Ionic Take pictures cannot upload to cloudinary using unsigned upload -
i trying take picture using cordova plugin , upload cloudinary using ionic browser. setup unsigned upload in cloudinary, , took logic https://calendee.com/2015/01/15/posting-images-to-cloudinary-in-ionic-apps/ upload cloudinary. have written logic in dashctrl controller easiness see everything. code follow:
angular.module('starter.controllers', []) .controller('dashctrl', function($scope, $cordovacamera, $cordovageolocation, $cordovafiletransfer, $q, $base64, $translate) { //$scope.$inject = ['$cordovacamera','$cordovageolocation','$cordovafiletransfer']; $scope.imageuri = ''; $scope.log=function(){ console.log('hello~~~'); }; $scope.takepicture = function() { console.log('taking pictures ....'); var options = { quality : 75, destinationtype : camera.destinationtype.data_url, sourcetype : camera.picturesourcetype.camera, allowedit : true, encodingtype: camera.encodingtype.jpeg, targetwidth: 300, targetheight: 300, popoveroptions: camerapopoveroptions, savetophotoalbum: false }; $cordovacamera.getpicture(options).then(function(imagedata) { $scope.imageuri = imagedata; //console.log('$scope.image ', $scope.imageuri); var base64encodedstring = $base64.encode(imguri); var base64encodedstring = decodeuricomponent(base64encodedstring); var decodedstring = $base64.decode(base64encodedstring); return uploadimage(decodedstring); }) .then(function(result){ var url = result.secure_url || ''; var urlsmall; if(result && result.eager[0]) { urlsmall = result.eager[0].secure_url || ''; console.log('url ~~~~~~~~ ', urlsmall); chat.sendmessage(roomid,'', 'default', urlsmall, function(result){ console.log('url ', urlsmall); console.log('message image url updated firebase'); }) } // results here. $cordovacamera.cleanup(); }, function(err){ // error here $cordovacamera.cleanup(); }); }; function uploadimage(imageuri) { var deferred = $q.defer(); var filesize; var percentage; // find out how big original file window.resolvelocalfilesystemurl(imageuri, function(fileentry) { fileentry.file(function(fileobj) { filesize = fileobj.size; // display loading indicator reporting start of upload $ionicloading.show({template : 'uploading picture : ' + 0 + '%'}); // trigger upload uploadfile(); }); }); function uploadfile() { // add cloudinary "upload preset" name headers var uploadoptions = { params : { 'upload_preset': my_preset} }; $cordovafile // cloudinary url go here .uploadfile(my_upload_url, imageuri, uploadoptions) .then(function(result) { // let user know upload completed $ionicloading.show({template : 'upload completed', duration: 1000}); // result has "response" property escaped // fyi: result have urls new images generated // eager transformations var response = json.parse(decodeuricomponent(result.response)); deferred.resolve(response); }, function(err) { // uh oh! $ionicloading.show({template : 'upload failed', duration: 3000}); deferred.reject(err); }, function (progress) { // upload plugin gives information how data has been transferred // on interval. use original file size show progress indicator. percentage = math.floor(progress.loaded / filesize * 100); $ionicloading.show({template : 'uploading picture : ' + percentage + '%'}); }); } return deferred.promise; } })
i able take picture, that's it. console.log in uploadimage never appeared. apologize novice ionic knowledge, don't know trouble-shoot this. configured post cloudniary url: "http://res.cloudinary.com/my_domain/image/upload".
full code in repo: https://github.com/7seven7lst/ionic_test/
you using
$cordovafile.uploadfile(my_upload_url, imageuri, uploadoptions)
you need use
$cordovafiletransfer.upload(server, filepath, options)
here more info:
Comments
Post a Comment