current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 4 down vote favorite
1

I'm using Angular-file-upload to upload files to an API by doing this:

var upload = function (file) {
    return $upload.upload({
        url: '/api/place/logo',
        data: {place_id: 1, token: <some_token>},
        file: file
    });
};

All the parameters seem to be correctly set. The API expects the token to be present for authentication. For some reason, the API never receives the token or the place_id posted by the client and always responds with a BadRequest.

What is the issue here?

share|improve this question
    
token should not be part of data, it should be part of header, if i m not mistaken – entre Dec 31 '14 at 12:57
    
@HarishR in an ideal scenario, yes. But we're first writing a viable RESTful API that can work across clients without much hassle. Using the token as part of the data is more straightforward, imho. – Ashesh Dec 31 '14 at 14:08
    
what would be hassels, you could face if you pass the token as part of header? in fact most of the client do agree to have token in header – entre Dec 31 '14 at 14:13
    
Did you ever figure this out? – Jeremy A. West Mar 30 '15 at 0:53
up vote 1 down vote

Are you using Bearer token? I'm using the https://github.com/nervgh/angular-file-upload and ran into a similar problem, turns out the file post was occurring using AJAX and not the $http, so the authorisation interceptor service (which is supposed to inject the token into all outgoing traffic from my angular website) wasn't working.

Depending on how your library works, you might be running into a similar issue. If so, you have to specify the token as the 'Authorization' header, something along the lines of (where I am retrieving authData from localStorage after having been authorized previously by the token provider):

tokenHeader = 'Bearer ' + authData.token;
var uploader = $scope.uploader = new FileUploader({
    headers: { "Authorization": tokenHeader },
    url: _uploadUrl,
    withCredentials: true
 });
share|improve this answer
up vote 1 down vote

Try this.

At angular controller:

.controller('uploadCtrl', function ($scope, FileUploader) {
    $scope.uploader = new FileUploader({
        url: "./api/file/upload",
        formData: [
            { "data1": "value1" },
            { "data2": "value2" }
        ]
    });
});

At server side(In FileController, method: upload):

var provider = GetMultipartProvider();
var result = await Request.Content.ReadAsMultipartAsync(provider);

var data1 = result.FormData.Get("data1");
var data2 = result.FormData.Get("data2");
share|improve this answer
up vote 0 down vote

I do like this:

var tokenHeader = $http.defaults.headers.common.Authorization;

var uploader = $scope.uploader = new FileUploader({
    url: '/api/WS_Books/PostBooks',
    autoUpload: true,
    headers: { "Authorization": tokenHeader },
    withCredentials: true
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.