Getting a binary file from an angular resource

Question

I am trying to use an angular resource to get a binary file. I am able to do this with an http.get.

return $http.get("http://localhost:8080/users/my_user/avatar", {responseType:'arraybuffer'});

This returns a string of the file. That is what I want.

When trying to use the resource:

var resource4 = $resource('/users/:userId/avatar',{},{'get':{method:'GET',cache:false,responseType:'arraybuffer'},'getCached':{method:'GET',cache:true,responseType:'arraybuffer'}, 'postList':{method:'POST', isArray:true}});

I return an object with a get method here:

getAvatar: function(userId, successCallback, errorCallback) {

                var requestData = { userId: convertValueForRest(userId)};
                return resource4.get(requestData, successCallback, errorCallback);

            }

Then I inject it into a service and pass it through:

function getAvatar(user){
    return UserDetailsInterface.getAvatar(user);
}

I grab the data from $promise here:

UserPreferences.getAvatar(userName).$promise
                    .then(function success(image){

What is returned is the file's characters split out into a huge array. I am really not sure why.

Answer 1

I figured out the problem. I needed to add transformResponse to handle the arraybuffer being returned in the resource.

transformResponse: function(data, headersGetter) { return { data : data }}

This answer was what I needed: https://stackoverflow.com/a/24290186/5838629