Upload Image in AngularJS

Issue

I encountered a problem in my code, I have a employee information update page which includes a photo uploader, my problem is when someone uploads a big photo, lets say 3mb nothing is waiting for the upload to finish and the profile picture gets broken. This is my code, html side:

<md-input-container flex>
    <fieldset>
        <div>
            <img data-ng-src="{{imageURL}}" alt="{{user.displayName}}"
                 class="user-profile-picture">
        </div>

        <div data-ng-hide="uploader.queue.length">
            <input aria-label="Upload" type="file" nv-file-select uploader="uploader" data-ng-model="contacto.profileImageURL" multiple>
        </div>
        <div class="md-actions" layout="row" layout-align="end center"
             data-ng-show="uploader.queue.length">
            <md-button data-ng-click="cancelUpload();">Cancelar</md-button>
            <!-- <md-button class="md-primary" data-ng-click="uploadProfilePicture();">Ok</md-button> -->
        </div>
    </fieldset>
</md-input-container>

Controller:

   // Create file uploader instance
    $scope.uploader = new FileUploader({
        url: 'api/users/picture'
    });

    // Set file uploader image filter
    $scope.uploader.filters.push({
        name: 'imageFilter',
        fn: function (item) {
            var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
        }
    });

    // Called after the user selected a new picture file
    $scope.uploader.onAfterAddingFile = function (fileItem) {
        if ($window.FileReader) {
            var fileReader = new FileReader();
            fileReader.onload = function (fileReaderEvent) {
                $timeout(function () {
                    $scope.imageURL = fileReaderEvent.target.result;
                }, 0);
            };

            fileReader.readAsDataURL(fileItem._file);
            console.log('donde');
        }
    };

    // Called after the user has successfully uploaded a new picture
    $scope.uploader.onSuccessItem = function () {
        console.log('salio?');
        // Show success message
        $scope.success = true;

        // Clear upload buttons
        $scope.cancelUpload();
    };

    // Called after the user has failed to uploaded a new picture
    $scope.uploader.onErrorItem = function (fileItem, response) {
        // Clear upload buttons
        $scope.cancelUpload();

        // Show error message
        $scope.error = response.message;
    };

    // Change user profile picture
    $scope.uploadProfilePicture = function () {
        // Clear messages
        console.log('image upload fired!');
        $scope.success = $scope.error = null;

        // Start upload
        $scope.uploader.uploadAll();
    };

    // Cancel the upload process
    $scope.cancelUpload = function () {
        $scope.uploader.clearQueue();
        $scope.imageURL = $scope.contacto.profileImageURL;
    };

I can't find a way for the client to wait for that upload to finish.

Solution

so i am guessing there is a submit button after this where user submits the information,if so then use ng-disabled on it

<button ng-disabled="uploadwait" ng-click="submit()">Submit</button>

then in controller

$scope.uploadwait=false;//intially nothing is getting uploaded
$scope.uploader.onAfterAddingFile = function (fileItem) {
        $scope.uploadwait=true;//user starts waiting
        if ($window.FileReader) {
            var fileReader = new FileReader();
            fileReader.onload = function (fileReaderEvent) {
                $timeout(function () {
                    $scope.imageURL = fileReaderEvent.target.result;
                }, 0);
            };

            fileReader.readAsDataURL(fileItem._file);
            console.log('donde');
        }
    };

    // Called after the user has successfully uploaded a new picture
    $scope.uploader.onSuccessItem = function () {
        $scope.uploadwait=false;//upload finished
        console.log('salio?');
        // Show success message
        $scope.success = true;

        // Clear upload buttons
        $scope.cancelUpload();
    };

Answered By - Hussain Mohd