Multiple file inputs and croppers about ngcropper HOT 4 CLOSED

.controller ('addAlbumCtrl', function ($scope,$timeout,Cropper){


    var file, file2, data, data2;

/**
 * Method is called every time file input's value changes.
 * Because of Angular has not ng-change for file inputs a hack is needed -
 * call `angular.element(this).scope().onFile(this.files[0])`
 * when input's event is fired.
 */
$scope.onFile = function(blob) {
    Cropper.encode((file = blob)).then(function(dataUrl) {
    $scope.dataUrl = dataUrl;
    $timeout(showCropper);  // wait for $digest to set image's src
  });
};

      $scope.onFile2 = function(blob) {
     Cropper.encode((file = blob)).then(function(dataUrl) {
      $scope.dataUrl2 = dataUrl;
      $timeout(showCropper2);  // wait for $digest to set image's src
    });
  };

   $scope.preview = function() {
        if (!file || !data) return;
        Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
         ($scope.preview || ($scope.preview = {})).dataUrl = dataUrl;
        });
  };

 $scope.preview2 = function() {
      if (!file || !data) return;
      Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
       ($scope.preview2 || ($scope.preview2 = {})).dataUrl = dataUrl;
    });
      };


  $scope.scale = function(width) {
    Cropper.crop(file, data)
      .then(function(blob) {
       return Cropper.scale(blob, {width: width});
      })
      .then(Cropper.encode).then(function(dataUrl) {
        ($scope.preview || ($scope.preview = {})).dataUrl = dataUrl;
      });
  }

  $scope.scale2 = function(width) {
    Cropper.crop(file, data)
      .then(function(blob) {
       return Cropper.scale(blob, {width: width});
      })
     .then(Cropper.encode).then(function(dataUrl) {
       ($scope.preview2 || ($scope.preview2 = {})).dataUrl = dataUrl;
      });
  }

     $scope.options = {
            maximize: true,
           preview:'.preview-container',
         aspectRatio: 3/1,
       done: function(dataNew) {
       data = dataNew;
    }
  };

      $scope.options_2 = {
       maximize: true,
      aspectRatio: 3/1,
      preview:'.preview-thumbnail',
       done: function(dataNew) {
       data = dataNew;
      }
     };

      $scope.showEvent2 = 'show';
      $scope.hideEvent2 = 'hide';

     function showCropper() { $scope.$broadcast($scope.showEvent); }
     function hideCropper() { $scope.$broadcast($scope.hideEvent); }

    function showCropper2() { $scope.$broadcast($scope.showEvent2); }
     function hideCropper2() { $scope.$broadcast($scope.hideEvent2); }

        })

<section>
<div class="form-group">
<label>
    Album Art (900 x 300 px)
     <form>
     <input type="file" onchange="angular.element(this).scope().onFile(this.files[0])">
  <button ng-click="preview()">Show preview</button>
  <button ng-click="scale(200)">Scale to 200px width</button>
  <label>Disabled <input type="checkbox" ng-model="options.disabled"></label>

  <br />

  <div ng-if="dataUrl" class="img-container">
    <img ng-if="dataUrl" ng-src="{{dataUrl}}" width="900"
     ng-cropper ng-show="{{showEvent}}" ng-hide="{{hideEvent}}" ng-options="options">
  </div>

  <div class="preview-container">
    <img ng-if="preview.dataUrl" ng-src="{{preview.dataUrl}}">
  </div>



</div>

   </form>




<div class="form-group">
         <input type="file" onchange="angular.element(this).scope().onFile2(this.files[0])">
  <button ng-click="preview2()">Show preview</button>
  <button ng-click="scale(200)">Scale to 200px width</button>
  <label>Disabled <input type="checkbox" ng-model="options.disabled"></label>

  <br />

  <div ng-if="dataUrl2" class="img-thumb-container">
    <img ng-if="dataUrl2" ng-src="{{dataUrl2}}" width="900"
     ng-cropper ng-show="{{showEvent2}}" ng-hide="{{hideEvent2}}" ng-options="options_2">
  </div>

  <div class="preview-thumbnail">
    <img ng-if="preview2.dataUrl" ng-src="{{preview2.dataUrl}}">
  </div>


 <!--  <input type="file" ng-file-select="onFileSelect($files)" multiple> -->

</div>
</section>

.preview-container {
        overflow:hidden;
        width:900px;
        height:300px;
    }
    .preview-thumbnail {
        overflow:hidden;
        width:900px;
        height:300px;
    }