Angular File Upload with Parameters

Question

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?

Solution 1

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");

Solution 2

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
 });