title: How to crop image and upload using ng-file-upload?
body: <p>This is my view.</p>
  
  <pre><code>&lt;div class="btn btn-primary"
       ng-model="file" name="file"
       accept="image/*"
       ngf-select ngf-pattern="'image/*'"
       ngf-min-height="100" ngf-min-width="100"
       ngf-resize="{width: 400, height: 600}"
       ngf-max-size="20MB"
       ngf-multiple="false"&gt;Select
  &lt;/div&gt;
  
  
  &lt;input type="file" img-cropper-fileread image="cropper.sourceImage"/&gt;
  &lt;div&gt;
      &lt;canvas width="500" height="300" id="canvas"
              image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage"
              crop-width="400" crop-height="200" touch-radius="30"
              keep-aspect="true" crop-area-bounds="bounds"&gt;
      &lt;/canvas&gt;
  &lt;/div&gt;
  &lt;div&gt;Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})&lt;/div&gt;
  &lt;div ng-show="cropper.croppedImage!=null"&gt;&lt;img ng-src="{{cropper.croppedImage}}"/&gt;&lt;/div&gt;
  
  
  &lt;button type="submit" ng-click="submit()"&gt;submit&lt;/button&gt;
  </code></pre>
  
  <p>This is my controller.</p>
  
  <pre><code>$scope.cropper = {};
  $scope.cropper.sourceImage = null;
  $scope.cropper.croppedImage   = null;
  $scope.bounds = {};
  $scope.bounds.left = 0;
  $scope.bounds.right = 0;
  $scope.bounds.top = 0;
  $scope.bounds.bottom = 0;
  
  $scope.url = 'http://192.168.0.101/mysite/uploadurl';
  
  $scope.submit = function() {
      $scope.upload($scope.file);
  };
  
  // upload on file select or drop
  $scope.upload = function (file) {
      Upload.upload({
          url: $scope.url,
          data: {file: file}
      }).then(function (resp) {
          console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
      });
  };
  </code></pre>
  
  <p>I can upload my ng-model="file" but that not cropped image.</p>
  
  <p>How to insert my cropped image into my data:{file:file}.</p>