Angular Upload Parameter Files

Question

I use Angular-file-upload to upload files to the API by doing the following:

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

All parameters are apparently set correctly. The API expects availability tokenfor authentication. For some reason, the API never receives tokenor place_id, sent by the client, and always responds BadRequest.

What is the problem?

Answer 1

Try it.

In angular controller:

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

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

Answer 2

Bearer? https://github.com/nervgh/angular-file-upload , , AJAX, $http, ( - angular) .

, , . , "", - ( authData localStorage , ):

tokenHeader = 'Bearer ' + authData.token;
var uploader = $scope.uploader = new FileUploader({
    headers: { "Authorization": tokenHeader },
    url: _uploadUrl,
    withCredentials: true
 });

Answer 3

:

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

Answer 4

onBeforeUploadItem jwt

    uploader.onBeforeUploadItem = function (item) {
      item.headers = {
      'Authorization': 'Bearer ' + localStorage.getItem('token_name')
       };
    };