JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<script src="https://rawgit.com/alexk111/ngImgCrop/master/compile/unminified/ng-img-crop.js"></script>
<link rel="stylesheet" href="https://rawgit.com/alexk111/ngImgCrop/master/compile/unminified/ng-img-crop.css">
<body ng-app="fileUpload" ng-controller="MyCtrl">
    <form name="myForm">
        <div>Crop Image and Upload</div>
        <button ngf-select ng-model="picFile" accept="image/*">
            Select Picture</button>
        <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
             class="cropArea">
            <img-crop image="picFile  | ngfDataUrl"                 
            result-image="croppedDataUrl" ng-init="croppedDataUrl=''">
            </img-crop>
        </div>
        <div>
            <img ng-src="{{croppedDataUrl}}" />
        </div>
        <button ng-click="upload(croppedDataUrl)">Submit</button> 
            
        <span class="progress" ng-show="progress >= 0">
          <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
        </span>
        <span ng-show="result">Upload Successful</span>
        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </form>
</body>

CSS

.cropArea {
    background: #E4E4E4;
    overflow: hidden;
    width:500px;
    height:350px;
}
form .progress {
    line-height: 15px;
}
.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}
.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

JavaScript

//inject ngFileUpload and ngImgCrop directives and services.
var app = angular.module('fileUpload', ['ngFileUpload', 'ngImgCrop']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.upload = function (dataUrl) {
        Upload.upload({
            url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
            data: {
                file: Upload.dataUrltoBlob(dataUrl)
            },
        }).then(function (response) {
            $timeout(function () {
                $scope.result = response.data;
            });
        }, function (response) {
            if (response.status > 0) $scope.errorMsg = response.status 
                + ': ' + response.data;
        }, function (evt) {
            $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
        });
    }
}]);