3

I have an upload function which loops through the selected files and adds them on the servers file system.

Upload function:

$scope.uploadImages = function () {
        for (var i = 0; i < $scope.imageModels.length; i++) {
            var $file = $scope.imageModels[i].file;
            (function (index) {
                $upload
                    .upload({
                        url: "/api/upload/",
                        method: "POST",
                        data: { type: 'img', object: 'ship' },
                        file: $file
                    })
                    .progress(function (evt) {
                        $scope.imageProgress[index] = parseInt(100.0 * evt.loaded / evt.total);
                    })
                    .success(function (data) {
                        $scope.imageProgressbar[index] = 'success';

                        // Add returned file data to model
                        $scope.imageModels[index].Path = data.Path;
                        $scope.imageModels[index].FileType = data.FileType;
                        $scope.imageModels[index].FileSize = $scope.imageModels[index].file.size;

                        var image = {
                            Path: data.Path,
                            Description: $scope.imageModels[index].Description,
                            Photographer: $scope.imageModels[index].Photographer
                        };
                        $scope.images.push(image);
                    })
                    .error(function (data) {
                        $scope.imageProgressbar[index] = 'danger';
                        $scope.imageProgress[index] = 'Upload failed';

                        alert("error: " + data.ExceptionMessage);
                    });
            })(i);
        }
        return $scope.images;
    }
};

If I call this alone it works just fine, but when I put it together with my other functions it seems like it doesn't finish:

 $scope.create = function () {
    $scope.ship = {};

    // This function is asynchronous
    $scope.ship.Images = $scope.uploadImages();

    // Here $scope.ship don't contain any Images
    angular.extend($scope.ship, $scope.shipDetails);

    shipFactory.createShip($scope.ship).success(successPostCallback).error(errorCallback);
};

$scope.ship contains no images, when I debug it starts uploading them, but doesn't wait for it to complete and just executes the next lines of code.

How can I make it work so I make sure the $scope.uploadImages function is done before it continues?

Lars
  • 589
  • 2
  • 13
  • 25
  • You're using AJAX wrong. If the upload is async then `$scope.uploadImages()` will *never* return a value in the way you expect. You need to *call* another function during the `.success` or `.error` callbacks. – g.d.d.c Feb 11 '14 at 21:20
  • http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – Moob Feb 11 '14 at 21:22
  • I found my answer from this post: http://stackoverflow.com/questions/18421830/how-to-wait-till-the-response-comes-from-the-http-request-in-angularjs – Lars Feb 18 '14 at 19:24

1 Answers1

1

In order to be sure that your function is done you need to use promises.

Here is a very useful video tutorial that explains how to use them:

https://egghead.io/lessons/angularjs-promises

Tome Pejoski
  • 1,582
  • 2
  • 10
  • 34