ngCordova camera upload to Amazon S3

I'm trying to upload an image taken from the iOS camera in ngCordova to a bucket on Amazon S3. I have no way of debugging this code. Im not sure if my problem is with S3 or my camera. Is there a way to debug an ionic/ngCordova app running on a device?

.controller('AddMediaCtrl', function($scope, $cordovaCamera) {

  //////////////////////////////////////////////////////////
  //                     AMAZON S3                       //
  ////////////////////////////////////////////////////////
    $scope.creds = {
      bucket: 'bucket_name',
      access_key: '*************',
      secret_key: '*************'
    }

    var bucket = new AWS.S3({params: {Bucket: $scope.creds.bucket }});
    AWS.config.update({accessKeyId: $scope.creds.access_key, secretAccessKey: $scope.creds.secret_key});
    AWS.config.region = 'us-east-1';

    var upload = function(file){

      results.innerHTML = '';

      var params = {Key: file.name, ContentType: file.type, Body: file};
      bucket.upload(params, function (err, data) {
        console.log(err);
      });
    }




   //////////////////////////////////////////////////////////
   //                     CAMERA                          //
   ////////////////////////////////////////////////////////
   $scope.images = [];
    var image = {}
   $scope.addImage = function() {
    // 2
    var options = {
      destinationType : Camera.DestinationType.FILE_URI,
      sourceType : Camera.PictureSourceType.CAMERA, // Camera.PictureSourceType.PHOTOLIBRARY
      allowEdit : true,
      encodingType: Camera.EncodingType.JPEG,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: true
    };

    // 3
    $cordovaCamera.getPicture(options).then(function(imageData) {

    // 4
    image.data = imageData;
    image.type = 'image/jpeg'

      onImageSuccess(imageData);

      function onImageSuccess(fileURI) {
        createFileEntry(fileURI);
      }

      function createFileEntry(fileURI) {
        window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
      }

      // 5
      function copyFile(fileEntry) {
        var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
        var newName = makeid() + name;
        image.name = newName

        window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
        fileEntry.copyTo(
          fileSystem2,
          newName,
          onCopySuccess,
          fail
        );
        },
        fail);
        //upload to S3
        upload(image);
      }

      // 6
      function onCopySuccess(entry) {
        $scope.$apply(function () {
          $scope.images.push(entry.nativeURL);
        });
      }

      function fail(error) {
        console.log("fail: " + error.code);
      }

      function makeid() {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (var i=0; i < 5; i++) {
          text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        return text;
      }

      }, function(err) {
        console.log(err);
    });
  }




})

You can use the intel xdk for on device debugging. It is the best way to debug on a device for hybrid apps that i have found. install intel xdk:https://software.intel.com/en-us/html5/tools, add your project, then at the top click on the debugg tab. it will tell you the steps to connect your device. Run the debugger, it works like a charm.

Answering to your question if there is a way to debug an app on a device:

The easiest way to do that would be by running the following command:

ionic run ios -l -c -s

Where arguments -l -c -s stands for:

  • -livereload Live Reload app dev files from the device
  • -consolelogs Print app console logs to Ionic CLI
  • -serverlogs Print dev server logs to Ionic CLI

This will show you all type of messages: errors, debugs and your console.logs messages in console real time!

For debugging on a device I recommend this software. The truth helps a lot and you can see how your application behaves within the physical device. Html, css, functionality etc.

GapDebug