Angular JS and Ionic - Error on $http.post, help me understand

Question

I am trying to upload a file from an iOS, but I have an unexpected error. This is my HTML:

      <div ng-repeat="photo in vendordata.galerias" class="elemento">
        <div style="z-index: 10;">
          <img class="thumb" ng-src="{{photo.url}}" />
        </div>
        <div class="" style="text-align: center;">
          <button class="" href="#" ng-show="photo.borrar">Eliminar</button>
          <button class="" href="#" ng-click="subirFoto($index+1)" ng-hide="photo.borrar">Subir foto</button>
        </div>
      </div>

The controller methods:

$scope.subirFoto = function(identificador){
    $scope.elementoSek = identificador;
    console.log("IMG src seleccionado:"+$scope.elementoSek);
    $scope.getPhoto(pictureSource.PHOTOLIBRARY);
  };
  $scope.getPhoto = function (source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
  };
  function onPhotoURISuccess(imageURI) {
    // Uncomment to view the image file URI

    // Get image handle
    var previo = $scope.vendordata.galerias[$scope.elementoSek].url;



    var file = imageURI;
    var uploadUrl = CLOSER_SERVER.url+'/upload_vendor';
    var uploadResult = fileUpload.uploadFileToUrl(file, uploadUrl, $scope.elementoSek, Session.getId(), 'vendor');

    console.log(uploadResult);
    if(uploadResult.response == "200"){
      $scope.vendordata.galerias[$scope.elementoSek].url = imageURI;
      $scope.$apply();
    }
  }

And the service fileUpload:

app.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl, numero, sessionIde, typePic){
        var fd = new FormData();

        fd.append('file', file);
         var data = {
          session : sessionIde,
          num_foto: numero,
          type : typePic
         };

        fd.append("data", JSON.stringify(data));

        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .then(function(data){
          console.log("response ok: "+JSON.stringify(data));
          return JSON.stringify(data);
        }, function(){
          console.log("response fail");
          return "error subiendo archivo";
        });
    }
}]);

What this does? In a image gallery of 6 elements, we click "Upload" (Subir) button, then the iOS image gallery is loaded for picking an image. When I pick an image, the image URI is sent to the fileUpload service. With the method uploadFIleToUrl() I send it to the server with $http.post . In this moment it throws an odd error I cannot understand:

TypeError: undefined is not an object (evaluating 'uploadResult.response')

callbackFromNativecordova.js:306

(función anónima)cordova.js:1102

nativeEvalAndFetchcordova.js:1110

nativeCallbackcordova.js:1099

(función anónima)index.html:1

Using console.log I had checked that the error happens in the service fileUpload between line fd.append("data", JSON.stringify(data)); and the line console.log("response ok: "+JSON.stringify(data));

What is this error???

Answer 1

Are you sure that the error occurs before the HTTP post?

Seems like in case of failure on fileUpload service, you return a string, but when you try to access the result, you always treat as a JSON object:

.then(function(data){
      console.log("response ok: "+JSON.stringify(data));
      return JSON.stringify(data);
    }, function(){
      console.log("response fail");
      return "error subiendo archivo";
    });

You need some validation here:

if(angular.isObject(uploadResult) && uploadResult.response == "200"){
  $scope.vendordata.galerias[$scope.elementoSek].url = imageURI;
  $scope.$apply();
}

You could make use of ng-file-upload , even if you can't/don't want to use the directives, you still can use de upload service.

Good luck!