Using a variable after it was changed by another function - getting undefined

Question

I want to get the image path after the execution of the uploadFiles function. This way, I will have the value assigned to self.ProjectImagePath. But it is not working, I think it executes right after the function call. Anyone can help ?

        self.submitProject = function(file) {
          console.log("Submit Project \n");
            uploadFiles.apply(this, arguments);
            console.log(self.ProjectImagePath); ///ERROR HERE!!!! (UNDEFINED)
            var data = JSON.stringify({
                name: self.ProjectName,
                room: self.room,
                managers: self.Managers,
                members: self.ProjectMembers,
                image: self.ProjectImagePath
            });
            //console.log(data);
            $http.post('/rooms/' + self.room + '/project', data).success(function(data) {
                //$window.location.href = "/";
            });
        }

        function uploadFiles(file) {
            file.upload = Upload.upload({
                url: 'projectImages/upload',
                data: {
                    file: file
                }
            });

            file.upload.then(function(response) {
                $timeout(function() {
                    file.result = response.data;
                    self.ProjectImagePath = file.result;
                });
            }, function(response) {
                if (response.status > 0)
                    self.errorMsg = response.status + ': ' + response.data;
              });
        }

After execution, the image is uploaded to the server but I cant get its path. Im using AngularJS

Your `console.log()` occurs before the response from the upload has finished. Detailed explanation [here](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). — Jasen, Aug 10 '16 at 17:44

TW80000 · Accepted Answer · 2016-08-10T18:07:04.867

You were having issues with calling code before the promise (asynchronous action) was finished.

This should do what you need:

self.submitProject = function(file) {
    console.log("Submit Project");

    function handleSuccess(response) {
        self.ProjectImagePath = file.result = response.data;

        // Should work correctly.
        console.log(self.ProjectImage);

        var data = JSON.stringify({
            name: self.ProjectName,
            room: self.room,
            managers: self.Managers,
            members: self.ProjectMembers,
            image: self.ProjectImagePath
        });

        $http.post('/rooms/' + self.room + '/project', data).success(function(data) {
            //$window.location.href = "/";
        });
    }

    function handleError(response) {
        if (response.status > 0)
            self.errorMsg = response.status + ': ' + response.data;
    }

    uploadFiles(file, handleSuccess, handleError);
};

function uploadFiles(file, successCallback, errorCallback) {
    file.upload = Upload.upload({
        url: 'projectImages/upload',
        data: {
            file: file
        }
    });

    file.upload.then(successCallback, errorCallback);
}

I tried that. It says "Cannot read property 'then' of undefined" — Nathan Barreto, Aug 10 '16 at 17:56
It worked. For what I saw, you adapted with callBacks, right ? I always get confused with callbacks — Nathan Barreto, Aug 10 '16 at 18:18
Understanding asynchronous operations in JavaScript is absolutely vital if you want to work with AJAX requests. I'd encourage you to spend a small amount of time reading about asynchronous JavaScript using callbacks. It's worth the time. — TW80000, Aug 10 '16 at 18:22

Using a variable after it was changed by another function - getting undefined

1 Answers1