meanTorrent/modules/users/client/views/settings/change-profile-picture.client.view.html

<section class="row">
    <div class="col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
        <form class="signin form-horizontal">
            <fieldset>
                <div class="form-group">
                    <img ngf-src="vm.fileSelected ? vm.resultImageURL : '/' + vm.user.profileImageURL" alt="{{vm.user.displayName}}"
                         class="img-thumbnail user-profile-picture" ngf-drop>
                </div>
                <div ng-show="vm.loading" class="form-group text-center">
                    <img ng-src="/modules/core/client/img/loaders/loader.gif" height="50" width="50" alt="Loading image...">
                </div>

                <div ng-show="vm.fileSelected" class="form-group imgCropArea">
                    <ui-cropper image="vm.selectedImageUrl" result-image="vm.resultImageURL" area-type="square"
                                chargement="'Loading...'" result-image-size="250"></ui-cropper>
                </div>

                <div ng-show="!vm.fileSelected" class="form-group">
                    <button class="btn btn-default btn-file" ngf-select="vm.handleFileSelect($event)" ng-model="vm.picFile" accept="image/*"
                            ngf-before-model-change="vm.loading = true" ngf-resize="{width: 400}"
                            ngf-resize-if="$width > 400 || $height > 400">{{'BUTTON_SELECT_PICTURE' | translate}}
                    </button>
                </div>
                <div ng-show="vm.fileSelected" class="form-group">
                    <button class="btn btn-primary" ng-click="vm.upload()">{{'BUTTON_USE_THIS_PICTURE' | translate}}</button>
                    <button class="btn btn-default" ng-click="vm.cancel()">{{'BUTTON_CANCEL' | translate}}</button>
                </div>
                <div ng-show="vm.fileSelected" class="form-group progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="{{vm.progress}}" aria-valuemin="0" aria-valuemax="100"
                         style="width:{{vm.progress}}%" ng-bind="vm.progress + '%'">
                        <span class="sr-only">{{vm.progress}}% {{'BUTTON_COMPLETE' | translate}}</span>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</section>