How to put binary file to API via AngularJs $http

Question

I want to upload a binary file (images) to an api which accepts application/octet-stream. Unfortunately it seems angular wants to transform my request, which does not work obviously and results in TypeError: key.charAt is not a function

My request looks like this:

var f = document.getElementById('file_picker').files[0],
r = new FileReader();
r.onloadend = function(e){
    var fileData = e.target.result;
    $http({
        url: '.../upload/' + id,
        method: 'PUT', 
        headers: {'Authorization': 'Bearer asdf',
        'Content-Type': 'application/octet-stream'}, 
        data: new Uint8Array(fileData), 
        transformRequest: []
    })
})
r.readAsArrayBuffer(f);

This is my request via curl which works:

curl -i -X PUT -H "Authorization: Bearer asdf" -H "Content-Type: application/octet-stream" --data-binary @jpg.jpg https://.../upload/123

Any ideas? Thanks.

Verthosa · Accepted Answer · 2017-01-05 10:11:38Z

2

try this:

            var fd = new FormData();
            fd.append("file", fileObj);

            $http({
                method: "POST",
                params: { 'forcecache': new Date().getTime() },
                url: <yoururl>,
                headers: {
                    "Content-Type": undefined
                },
                transformRequest: angular.identity,
                data: fd
            });

This is a working example on one of our projects. See http://www.uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs/ for more details

answered Jan 5, 2017 at 10:11

Verthosa

1,6881 gold badge16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chrjs Over a year ago

Does not work for me like this, because the Content I receive within the API is probably wrong. It's content length is 15. Not very big for an image.

chrjs Over a year ago

Update: The content of the request is: "[object Object]". Thats why the content length is 15.

chrjs · Accepted Answer · 2017-01-05 16:04:34Z

1

Working solution:

var file = document.getElementById('file_picker').files[0],
reader = new FileReader();
reader.onload = function() {
    var f = new Uint8Array(reader.result);
    $http({
        url: '...upload/,
        method: 'PUT',
        headers: {'Authorization': 'Bearer asdf',
                'Content-Type' : undefined},
        data: f, 
        transformRequest: [] 
      });
    };
reader.readAsArrayBuffer(file);

The problem is, we have a Data Mapping Interceptor configured, which converts all post and put requests to json. Ouch.

answered Jan 5, 2017 at 16:04

chrjs

2,4531 gold badge27 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to put binary file to API via AngularJs $http

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related