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?

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