Angular File upload formData

Question

I'm using Angular-File-Upload, the problem that is I can't send a formData along with the file. Following is my code:

 $scope.addProducts = function(){
        console.log($scope.product);
        ProductApi.addProduct($scope.product)
            .then(function(response){
                ngNotify.set('Your product has been added!', {
                position: 'bottom',
                duration: 2000
            });
                $scope.product_id = response.data;

                uploaderImages.uploadAll();
            })
            .catch(function(response){
                console.log(response.data);  
            })
}

What the above code does is, once the form is submit, the form will is send via api call. The response will be an product_id and uploaderImages.uploadAll(); is triggered!!(This stuff work perfectly). Following is uploaderImages that will post file to server:

var uploaderImages = $scope.uploaderImages = new FileUploader({
        url: '/api/productimg',
        onBeforeUploadItem: function(prod){
          var ids = $scope.product_id
          var prodid = { proid: $scope.product_id} ---> empty
          prod.formData.push(prodid)
          console.log($scope.product_id)   ----> product_id = 32
        },
        onCompleteAll: function(){
          console.log($scope.product_id); ----> product_id = 32
        },
        onSuccessItem: function(prodId,response,status,headers){

        }

    });

I had no idea how to tackle this prob, proid:product_id return as [object Object], if I assign proid as a fixed integer ie proid:23, it works.

PLEASE HELP!!!!!

br3w5 · Accepted Answer · 2015-10-05 14:25:07Z

1

You need to access the value of the product_id not just the response payload:

$scope.product_id = response.data.product_id;

Also, because you are using Promises you need to chain your methods. Try:

$scope.addProducts = function(){
    console.log($scope.product);
    ProductApi.addProduct($scope.product)
        .then(function(response) {
            return ngNotify.set('Your product has been added!', {
                position: 'bottom',
                duration: 2000
        }, function(error) {
                console.log(error);
        }) // assuming this is async so add another then block below to execute once this is done
        .then(function(response) {
            $scope.product_id = response.data.product_id; // response.data will give you the whole response payload if the object returned is {product_id: 123}
            uploaderImages.uploadAll();
        });
}

Note that the error handler is a callback to the first .then block (see the docs).

edited Oct 5, 2015 at 14:25

answered Oct 5, 2015 at 10:59

br3w5

4,6136 gold badges35 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

d3bug3r Over a year ago

Hi.. This solution not work out. It log an error on console

br3w5 Over a year ago

What version of angular are you using?

d3bug3r Over a year ago

my version is 1.4.4 and the error is TypeError: Cannot read property 'then' of undefined

br3w5 Over a year ago

Yes sorry, try adding a return in front of ngNotify.set

br3w5 Over a year ago

And just to check is ProductApi.addProduct using $http?

|

Collectives™ on Stack Overflow

Angular File upload formData

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related