How to add image and post to webservice?


#1

I’m creating a form to add new users. In this form I want to user choose your image profile, after choose the image I want to send this image to my webservice. The image is from device gallery.

I’m following this sample: http://learn.ionicframework.com/formulas/cordova-camera/
and this: How to make uploading files or images using ionicframwork or angularJS

I can’t do this works. I added cordova plugin to camera on my project: c:\myProject> cordova plugin add org.apache.cordova.camera but does not works and when I try render throws this exception: TypeError: Cannot read property 'getPicture' of undefined

How could I do this works ?

factory

var app = angular.module('starter');

app.factory('CameraFactory', ['$q', function($q) {

  return {
getPicture: function(options) {
var q = $q.defer();

navigator.camera.getPicture(function(result) {
// Do any magic you need
q.resolve(result);
}, function(err) {
  q.reject(err);
}, options);

return q.promise;
  }
     }
}]);

controller

var app = angular.module("starter");
app.controller("UserCtrl", function($scope, CameraFactory){

$scope.selectImage = function() {
	    CameraFactory.getPicture().then(function(imageURI) {
	      console.log(imageURI);
	    }, function(err) {
	      console.err(err);
	    });
 	};
});

html




<ion-content>

<form name="User">
  
  <div>
      <button ng-click="selectImage();">Imagem</button>
      <img ng-src="img/ionic.png" id="smallimage">
      <input type="text" ng-model="User.imageFile" size="30"/>
  </div>

   <div class="list list-inset">
          <label class="item item-input">
              <input type="text" placeholder="Nome" ng-model="User.nome" required="true">
          </label>
          <br/>
          <label class="item item-input">
              <input type="email" placeholder="Email" ng-model="User.email" required="true">
          </label>
          <br/>
          <label class="item item-input">
              <input type="password" placeholder="Senha" ng-model="User.senha" ng-minlength="8" maxlength="8"
               required="true">
          </label>
          <br/>                         
    </div>
    
</form>
<button type="button" class="button button-block button-energized"  
            ng-disabled="User.$invalid" ng-click="addUsuarioApp(User);">Cadastrar</button>

</ion-content>