How to send additional data with angularFileUpload

Question

I'm using angularFileUpload module in my project. It working fine but I want to sending additional data with my file/s but I can't.

var uploader = $scope.uploader = Upload.upload({
        url: 'api/photos/upload/propertyphoto',
        type:'post',
        data:{name:'my name'},
        headers:{
            csrf_token:CSRF_TOKEN,
            'X-XSRF-TOKEN':X_XSRF_TOKEN
        }
   });

Photo uploading working fine. but when I receive the data using $_POST['name'] thats does not work.

Ben Claar · Accepted Answer · 2015-08-12 05:57:50Z

2

I found the solution:

To send additional data or form data with angularFileUpload, you need to include the formData key.

Example:

var uploader = $scope.uploader = new FileUploader({ 
    url: 'api/photos/upload/propertyfeaturephoto', 
    type: 'post', 
    formData: [{mydata: 'this is my data'}], 
    headers: { 
        csrf_token: CSRF_TOKEN
    }, 
    success:function(resp) { 
        console.log(resp); 
    } 
});

Here formData allows the developer to send additional data or form data to server.

edited Aug 12, 2015 at 5:57

Ben Claar

3,43421 silver badges34 bronze badges

answered Jun 23, 2015 at 13:31

Nahid Bin Azhar

7731 gold badge5 silver badges18 bronze badges

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

Comments

bwobbones · Accepted Answer · 2015-06-02 12:35:37Z

1

Under what circumstances are you using $_POST['name']?

The only difference I can see with your code and my (working) code is that I don't have a type: 'post', seems to be ok without it.

I have a nodejs backend running Express. Express passes the data values through to node in a request object and I access it via req.body.name.

Are you sure your url is calling your backend correctly?

answered Jun 2, 2015 at 12:35

bwobbones

2,6084 gold badges25 silver badges34 bronze badges

2 Comments

Nahid Bin Azhar Over a year ago

oh, I used PHP for backend. so by using $_POST I just retrieve form data. Thank you for your response. I solve it :)

Nahid Bin Azhar Over a year ago

Here I just attached formData to sending additional data with the request

var uploader=$scope.uploader=new FileUploader({         url: 'api/photos/upload/propertyfeaturephoto',         type:'post',         formData:[{mydata:'this is my data'}],         headers:{             csrf_token:CSRF_TOKEN,             'X-XSRF-TOKEN':X_XSRF_TOKEN         },                  success:function(resp){             console.log(resp);         }    });

Collectives™ on Stack Overflow

How to send additional data with angularFileUpload

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