demo of ionic for selecting a picture from a device, cropping it and then uploading it to s3

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="http://code.ionicframework.com/0.9.27/css/ionic.min.css">
    <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.js"></script>
    
    <script src="app.js"></script>
    <script src="controllers.js"></script>

  </head>

  <body ng-app="picUploader" animation="slide-left-right-ios7">
    <ion-nav-bar type="bar-royal"
      animation="nav-title-slide-ios7"
      back-button-type="button-icon button-clear"
      back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>

    <ion-nav-view></ion-nav-view>
  </body>

</html>

angular.module('picUploader', ['ionic', 'starter.controllers'])


.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })

    // the select image tab has its own child nav-view and history
    .state('tab.select-image', {
      url: '/select-image',
      views: {
        'select-tab': {
          templateUrl: 'select-image.html',
          controller: 'SelectPicCtrl'
        }
      }
    })

    .state('crop-image', {
      url: '/crop-image/:imageURI',
      templateUrl: 'crop-image.html',
      controller: 'CropImgCtrl'
    });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/select-image');

});

angular.module('starter.controllers', ['ionic'])

// A simple controller that fetches a list of data from a service
.controller('SelectPicCtrl', function($scope, $state) {

  $scope.launchPhotoLibrary = function() {
    if (navigator.camera) {
      navigator.camera.getPicture( cameraSuccess, cameraError,
                                 { sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY } );
    } else {
      $scope.imagestring = encodeURIComponent("http://lorempixel.com/200/400/");
    }
    $state.go('crop-image', {imageURI:$scope.imagestring});
  };
  function cameraSuccess(imageURI) {
    // hack until cordova 3.5.0 is released
    if (imageURI.substring(0,21)=="content://com.android") {
      var photo_split=imageURI.split("%3A");
      imageURI="content://media/external/images/media/"+photo_split[1];
    }
    $scope.image.src = imageURI;
  }
  function cameraError(message) {
    alert('Failed because: ' + message);
  }

})


// controller for image cropping view
.controller('CropImgCtrl', function($scope, $stateParams) {
  $scope.imagestring = decodeURIComponent($stateParams.imageURI);
});

<ion-view title="Select Image">
  <ion-content has-header="true" has-tabs="true" class="center-contents">
    <button class="button button-block button-energized padding-vertical" ng-click="launchPhotoLibrary()">
      upload picture
    </button>
  </ion-content>
</ion-view>

  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button class="button-icon">
      <i class="ion-close medium"></i>
    </ion-nav-back-button>
  </ion-nav-bar>
<ion-nav-view title="crop image!" >
  <ion-content has-header="true" padding="true">
    {{ imagestring }}
    <img src="{{ imagestring }}" />
  </ion-content>
</ion-nav-view>

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">


  <!-- Pets Tab -->
  <ion-tab title="Select Pic" icon="icon ion-image" href="#/tab/select-image">
    <ion-nav-view name="select-tab"></ion-nav-view>
  </ion-tab>


  <!-- Adopt Tab -->
  <ion-tab title="Adopt" icon="icon ion-heart" href="#/tab/adopt">
    <ion-nav-view name="adopt-tab"></ion-nav-view>
  </ion-tab>


  <!-- About Tab -->
  <ion-tab title="About" icon="icon ion-search" href="#/tab/about">
    <ion-nav-view name="about-tab"></ion-nav-view>
  </ion-tab>


</ion-tabs>