How to return ArrayBuffer from $http request in Node.js?

Question

I sent a $http.post request from Angular.js to Node.js in order to get an ArrayBuffer as following:

$http.post('/api/scholarships/load/uploaded-files', Global.user, {responseType:'arraybuffer'}).success(function(ab){
    console.log(ab); // Return ArrayBuffer {}
});

Then, in Node.js, I retrieved uploaded files data and transform a Buffer object to ArrayBuffer object:

exports.loadUploadedFiles = function(req, res) {
    db.UserFile.findAll().success(function(files) {
        var buffer = files[0].dataValues.data; // Get buffer
        var arrayBuffer = new ArrayBuffer(buffer.length); // Start transforming Buffer to ArrayBuffer
        var views = new Uint8Array(arrayBuffer);
        for(var i = 0; i < buffer.length; ++i) {
            views[i] = buffer[i];
        }
        res.type('arraybuffer');
        res.send(arrayBuffer); // Send the ArrayBuffer object back to Angular.js
    }).error(function(err) {
        console.log(err);
        res.sendStatus(500);
    });
};

When I tried to print the response from above $http.post, I always got ArrayBuffer{}. What did I do wrong? Any help would be appreciated.

Solution

There is no need to create an ArrayBuffer on the server side. In fact just returning the Buffer in node.js should be fine. ArrayBuffer is a concept on the client/browser side to interpret the data coming from the server as an ArrayBuffer. The reason you are getting "ArrayBuffer{}" is probably because node.js is toString()'ing the ArrayBuffer on res.send() because it doesn't understand the object. So try this

exports.loadUploadedFiles = function(req, res) {
    db.UserFile.findAll().success(function(files) {
        var buffer = files[0].dataValues.data; // Get buffer
        res.send(buffer);
    }).error(function(err) {
        console.log(err);
        res.sendStatus(500);
    });
};

Comments

[gengkev]

what i was about to post :) ref: express.js documentation; res.send() allows sending a String or Buffer

[lvarayut]

Thanks for your response. When I transferred it as Buffer, I got a JavaScript object. Would it be possible to transform this object to ArrayBuffer in Angular.js?

[ekcr1]

What type of Javascript object did you get? Also what type of data does the buffer contain (i.e. is it JSON)?

[lvarayut]

Actually, this is what I got from returning the buffer object from Node.js: ` �PNG IHDR�,��$'f!IDATx���i�]I�� ���������s'�d���###r�ʒ*����F�^T�j‌​MCh�h�a0�/��f0� ��ԭFM��T�=�ʭ""3c�F��}s�I�ӷ�޽fv�|������+y~ "�������}����c���o�0�xP k�0�0i7�0ä�0�0�v�0�0L� �0ä�0�0�v�0�0L� �0�0i7�0ä�0�0L� �0�0i7�0ä�0�0�v�0�0L� �0ä�0�0�v�0�0L� �0�0i7�0c)�5����ꢯ#�5�a��v�0�0̵[�z�sU�{�y?���Wu>�}�RG�>���Ϣ ���^s;�{��|�6g���0̵;~���p�߿����±�a&��i��h̢�K%l��o�j���>�2���‌​ٰ��, olw�3,� ...

[ekcr1]

It looks like a PNG file. I just did a simple test of your scenario and I got the expected 'ab' as ArrayBuffer. What exactly is the type of 'ab' you are getting?

[lvarayut]

I also got ArrayBuffer but it's empty: ArrayBuffer{}

[ekcr1]

Could you post a simplified version of your code somewhere that demonstrates the problem?

[lvarayut]

I got it working by using base64 encoding/decoding :) BTW, Thanks for your help.

[Prasad19sara]

Hi LVarayut I am also facing a similar issue. can u plz post how u fixed your issue. any example code?