pictureUploader.component.html

<div ng-hide="$ctrl.showUploadPicture" class="row form-group">
    <div class="col-xs-12">
        <div ng-show="$ctrl.currentPicture">
            <img ng-src="{{$ctrl.currentPicture}}" alt="{{$ctrl.course.name}}"/>
        </div>
        <br/>
        <br/>
        <a ng-hide="$ctrl.showUploadPicture" ng-click="$ctrl.showUploadPicture = true">
            <span class="fa fa-cloud-upload"></span>
            <span>Subir imagen</span>
        </a>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div ng-show="$ctrl.showUploadPicture">
            <div class="row">
                <div class="col-xs-12 text-center upload-picture">
                    <div ngf-drop ng-model="$ctrl.picture" ngf-model-invalid="invalidFile" ngf-pattern="image/*"
                         ngf-max-size="1MB" ngf-resize="{{$ctrl.resize}}" class="crop-area" popup>
                        <div ng-hide="$ctrl.picture" class="drop-splash">
                            <span class="fa fa-picture-o fa-4x"></span><br>
                            <h3>Arrastre la imagen aquí</h3>
                            <span ng-class="{'text-danger': invalidFile.$error == 'maxSize' }">Tamaño máximo: 1MB</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-center form-group">
                <div class="col-xs-12 text-danger">
                    <span ng-show="invalidFile.$error == 'maxSize'">El archivo excede el tamaño máximo</span>
                    <span ng-show="invalidFile.$error == 'pattern'">El formato del archivo no es válido</span>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-11 text-right">
                    <button type="button" ng-click="$ctrl.showUploadPicture = false" class="btn btn-default">
                        <span class="fa fa-trash"></span> Cancelar
                    </button>
                </div>
                <div class="col-xs-1 text-right">
                    <button type="button" ng-click="$ctrl.upload($ctrl.picture)" class="btn btn-primary">
                        <span class="fa fa-floppy-o"></span> Subir
                    </button>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <uib-progressbar ng-show="$ctrl.progress" value="$ctrl.progress" type="success">
                        <strong>{{$ctrl.progress}}%</strong>
                    </uib-progressbar>
                </div>
            </div>
        </div>
    </div>
</div>

pictureUploader.component.js

angular.module('avp.courses').component('pictureUploader', {
    templateUrl: 'components/courses/pictureUploader.component.html',
    bindings: {
        course: '<',
        currentPicture: '<',
        resize: '<',
        onUpload: '&'
    },
    controller: ['Upload', function (upload) {
        let $ctrl = this;

        $ctrl.upload = function (picture) {
            upload.upload({
                url: `api/courses/${$ctrl.course._id}/picture`,
                data: {
                    file: picture
                }
            }).then(
                response => {
                    $ctrl.showUploadPicture = false;
                    $ctrl.onUpload({picture: response.data.picture});
                },
                () => $ctrl.showUploadPicture = false,
                event => $ctrl.progress = 100.0 * event.loaded / event.total
            );
        };
    }]
});