Image Upload: AngularJs

upload-photo.cshtml

<!-- ASP.NET part: "https://gist.github.com/Mr-Zoidberg/d9be453eb7d8cc7fc787f01dd381db17" -->
<!-- angular module and service are common so not included -->
<style>
    .cropArea {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: black;
}
.horizontal-center {
    margin-left: auto;
    margin-right: auto;
    -moz-min-width: 400px;
    -ms-min-width: 400px;
    -o-min-width: 400px;
    -webkit-min-width: 400px;
    min-width: 400px;
}
.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
</style>
<div class="">
    <div class="register-provider vertical-center" ng-controller="providerController as ctx">
        <div class="panel panel-default horizontal-center traditional" id="loading">
            <div class="panel-heading">
                
            </div>
            <div class="panel-body">
                <form role="form" name="providerRegisterForm" novalidate ng-show="!ctx.complete">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="control-row">
                                <input name="file1" type="file" class="btn pull-left" id="fileUpload" />
                                <button type="button" class="btn btn-info pull-right" ng-click="ctx.savePhoto()">Upload</button>
                            </div>
                            <hr />
                            <div class="row control-row">
                                <div class="cropArea">
                                    <img-crop ng-show="!ctx.model.ProfilePictureUrl"
                                              image="ctx.image"
                                              result-image="ctx.croppedImage"
                                              area-type="square"
                                              result-image-size="200"
                                              result-image-format="image/jpeg"></img-crop>
                                    <img ng-show="ctx.model.ProfilePictureUrl" ng-src="{{ctx.model.ProfilePictureUrl}}" />
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
        (function () {
    'use strict';

    app.controller('ctrl', ctrl);
    ctrl.$inject = ['$scope', 'service'];

    function ctrl($scope, service) {
        var ctx = this;

        function savePhoto() {
            var photo = new FormData();
            photo.append('UploadedImage', dataUrItoBlob(ctx.croppedImage));
            service.savePhoto(photo).then(function (response) {
                if (response.status === 200) {
                    console.log('image has been uploaded');
                }
            });
        };

        function dataUrItoBlob(dataUri) {
            var binary = atob(dataUri.split(',')[1]);
            var mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0];
            var array = [];
            for (var i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
            }
            return new Blob([new Uint8Array(array)], { type: mimeString });
        };

        function handleFileSelect(evt) {
            ctx.model.ProfilePictureUrl = '';
            var file = evt.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function (evt) {
                $scope.$apply(function ($scope) {
                    ctx.image = evt.target.result;
                });
            };
            reader.readAsDataURL(file);
        };

        (function init() {
            ctx.savePhoto = savePhoto;
            ctx.image = "";
            ctx.croppedImage = "";

            angular.element(document.querySelector('#fileUpload')).on('change', handleFileSelect);
        })();
    };
})();
</script>