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?

token should not be part of data, it should be part of header, if i m not mistaken — harishr, 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 — harishr, Dec 31 '14 at 14:13

score 3 · Answer 1 · answered Dec 28 '15 at 13:06

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

score 1 · Answer 2 · answered Apr 27 '15 at 19:30

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

score 0 · Answer 3 · answered Sep 28 '15 at 11:12

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

score 0 · Answer 4 · answered Aug 02 '17 at 01:01

0

you can use onBeforeUploadItem method to inject jwt token

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

answered Aug 02 '17 at 01:01

Sachintha Sandaruvan

1
1

score 0 · Answer 5 · answered Apr 25 '18 at 14:36

This here worked for me. I'm using PHP

You can send values to PHP using the formData property

app.controller ('FileUploadCtrl', ['$ scope', 'FileUploader', 
function ($ scope, FileUploader) {
var uploader = $ scope.uploader = new FileUploader ({
    url: '.myapi / mycontrollers / myuploadfile.php',
    formData: [{
             data1: 'value1',
             data2: 'value2',
             dataN: 'valueN'
           }]
});

In PHP you use $ _REQUEST to capture the information available in formData

$myValue1 = $_REQUEST ['data1'];
$myValue2 = $_REQUEST ['data2'];
$myValue3 = $_REQUEST ['dataN'];

Angular File Upload with Parameters

5 Answers5