angular async upload file with promises

Question

I'm new to angular, and i'm little bit confused via doc's from official site...

I have controller, there i have call of service method:

uploaderService.addImage(files);

and such service:

.service('uploaderService', ['$http', 'settings', function ($http, settings) {

    var url = undefined;

    var addImage = function(files){
      var fd = new FormData();
      fd.append("file", files[0]);
      $http.post(settings.apiBaseUri + "/files", fd, 
        {
          withCredentials: true,
          headers: {'Content-Type': undefined },
          transformRequest: angular.identity
        })
        .success(function (data, status, headers, config) {         
            url = "temp.jpg";
        })
        .error(function (err, status) {
          console.log('operation failed, status: ' + status);
        });
    };

    var deleteImage = function(){      
    };   

    return {
      addImage: addImage,
      deleteImage: deleteImage
    };

how could i wait until post data request if finished, and then pass in url variable location? i try so and so, but something gonna bad, and need help)

devqon · Accepted Answer · 2014-12-30 11:24:33Z

Inject angular's deferred:

.service('uploaderService', ['$http', '$q', 'settings', function ($http, $q, settings) {

Then use it in your function:

var addImage = function(files){

    var deferred = $q.defer();

    var fd = new FormData();
    fd.append("file", files[0]);
    $http.post(settings.apiBaseUri + "/files", fd, 
    {
        withCredentials: true,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    })
    .success(function (data, status, headers, config) {         
        url = "temp.jpg";
        deferred.resolve(data);
    })
    .error(function (err, status) {
        console.log('operation failed, status: ' + status);
        deferred.reject({msg: err});
    });

    return deferred.promise;
};

Then in your controller:

uploaderService.addImage(files)
    .then(function(data){
        // success
        var url = data.url; // assuming the returned data of the ajax call contains an url variable
    }, function(error){
        // error
    }).finally(function(){
        // always
    });

dfsq · Accepted Answer · 2014-12-30 11:26:15Z

1

You need to return a result of $http.post(...) call since it returns a Promise object:

var addImage = function (files) {

    var fd = new FormData();
    fd.append("file", files[0]);

    return $http.post(settings.apiBaseUri + "/files", fd, {
        withCredentials: true,
        headers: {'Content-Type': undefined},
        transformRequest: angular.identity
    })
    .success(function (data, status, headers, config) {
        return "temp.jpg";
    })
    .error(function (err, status) {
        return 'operation failed, status: ' + status;
    });
};

Then you would use it in controller:

uploaderService.addImage(files).then(function(url) {
    console.log('uploaded', url);
}, function(message) {
    console.log(message);
});

answered Dec 30, 2014 at 11:26

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

byCoder Over a year ago

which practice is best, your solution or @devqon with deferred?

dfsq Over a year ago

Both solutions works. However the one with $deferred is the most popular anti-pattern, because no need to create one more promise if you already have it ($http.post() is itself a promise).

Collectives™ on Stack Overflow

angular async upload file with promises

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related