How to crop image and upload using ng-file-upload?

Question

This is my view.

<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">Select
</div>


<input type="file" img-cropper-fileread image="cropper.sourceImage"/>
<div>
    <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">
    </canvas>
</div>
<div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div>
<div ng-show="cropper.croppedImage!=null"><img ng-src="{{cropper.croppedImage}}"/></div>


<button type="submit" ng-click="submit()">submit</button>

This is my controller.

$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);
    });
};

I can upload my ng-model="file" but that not cropped image.

How to insert my cropped image into my data:{file:file}.

Answer 1

Pass the newly cropped Image in your function.

<button type="submit" ng-click="submit(cropper.croppedImage)">submit</button>

Now change the submit function accordingly:

$scope.submit = function(croppedImage) {
    $scope.upload(croppedImage);
};