access variables declared outside $q resolve function, inside the resolve function

Question

I have a function(uploadOne) inside fileUpload service that uses $q and returns a promise:

function uploadOne(some input)
    {
        var deferred = $q.defer();
        if (everything is OK) deferred.resolve(some Data);
        else deferred.reject(some error);
        return deferred.promise;
    }

I inject fileUpload service and call uploadOne function inside my controller:

.controller('myController', ['$scope', 'lessonsService', 'fileUpload',
function ($scope, lessonsService, fileUpload) {

  //outside variable
  $scope.lessonData = {};

  fileUpload.uploadOne(some input data).then(function (some response data) {

    console.log($scope.lessonData); //is undefined
    lessonsService; //is undefined

  }, function (err) {
      //some code here
  });
}])

The problem is that the variable declared outside the success function ($scope.lessonData) is undefined. In addition, I cannot even use my other service (lessonsService) there since it is also undefined! I've seen the same behavior in other posts but none of them help. What mistake am I making?

As you noticed the code above is a simplified version of my real code. Here is my real code. I'm using ng-file-upload to upload a photo in my mongoDB database. When the image is stored in the database, the id of the image is returned from the server:

  .controller('UserPanelPostsController', ['$scope', 'lessonsService', 'fileUpload',
function ($scope, lessonsService, fileUpload) {

  //outside variable
  $scope.lessonData = {};

  $scope.submitLesson = function () {
    fileUpload.uploadOne($scope.file).then(function (imgData) {

      imgData; //is OK

      console.log($scope.lessonData); //is undefined
      lessonsService; //is also undefined

    }, function (err) {
      //some code here
    });
  };
}])

Here is my service:

 .service('fileUpload', ['$resource', '$http', 'baseURL', 'Upload', '$q',
function ($resource, $http, baseURL, Upload, $q) {

  var deferred = $q.defer();
  this.uploadOne = function (file) {
    Upload.upload({
      url: baseURL + 'pictures',
      data: {file: file}
    }).then(function (resp) {
      deferred.resolve(resp.data);
    }, function (resp) {
      deferred.reject(resp.status);
    }, function (evt) {
      //some code here
    });
    return deferred.promise;
  };

}])

try to use arrow function `fileUpload.uploadOne(some input data).then( (some response data) => {` — Aniruddha Das, Sep 28 '17 at 13:48
I've created a codepen for your case and it works just fine: https://codepen.io/karlen/pen/RLVJgE?editors=1111 check the console — Karlen Kishmiryan, Sep 28 '17 at 14:02
@KarlenKishmiryan thank you so much. I checked it and it works. But the thing is that the code I provided in my post is a super simplified version of my real code. Let me edit the question and add my real code — Kasra GH, Sep 28 '17 at 14:08
Avoid the [deferred antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, Sep 28 '17 at 16:18
@KasraGH I don't know what does your `Upload.upload` method, because right now the only issue I see can be in it. But if it returns a promise, you can just return it from `uploadOne` without using `deferred`. — Karlen Kishmiryan, Sep 28 '17 at 17:41
@KasraGH Here's the updated codepen, which reflects your code: https://codepen.io/karlen/pen/RLVJgE?editors=0011 click the button and wait for results in console. I've updated `uploadOne` method, but it works with your `deferred` too. — Karlen Kishmiryan, Sep 28 '17 at 17:51

access variables declared outside $q resolve function, inside the resolve function

0 Answers0