What is the correct way to send ArrayBuffer or Blob across and reconstruct them?

Question

I've read through a dozen posts on how to convert between ArrayBuffer to Blob or to Uint8Array etc. before sending the data to the client side... but I can't seem to be able to get it to work at all. When I do get the data through, I was not able to reconstruct them back as a Blob before outputting it to a file..

const Blob = require('cross-blob'); const randomBytes = require('randombytes'); const buffer = randomBytes(1024); // Supposed to give me Buffer

The followings were the stuff I tried...

data = buffer;

^ gives me <Buffer 11 22 33 ...>

data = Uint8Array.from(buffer);

^ gives me an array of integer, this looked the most promising? but when arrived to the client side, it became an object with indexes and byte value...

data = Uint8Array.from(buffer).buffer;

^ gives ArrayBuffer { byteLength: 1024}, when inspect it shows size: 2 and type: 'text/plain'...

data = new Blob(buffer, { type: 'application/octet-stream' }); data = new Blob([new Uint8Array(buffer, buffer.byteOffset, buffer.length)], { type: 'application/octet-stream' }); data = new Blob([Uint8Array.from(buffer)], { type: 'application/octet-stream' });

^ all these, when arrived to the client side also with size: 2 and type: 'text/plain'...

On the server side, I am running Express:

router.get('/test/*', function(req, res, next) { ... let data = myFunctionThatGeneratesData(); res.send(data); });

On the client side, I'm requesting it like this (Angular/TypeScript):

this.http.get('/test/random-bytes-array', { responseType: 'blob' // also tried 'arraybuffer' }).subscribe(data => { debugger; console.log(data); });

I must be doing something wrong... I am trying to send multiple chunk of binary data over, either as an ArrayBuffer, Uint8Array or Blob (whatever works) and when arriving at the other end, combine them back into a Blob.

In the Express doc, it pretty clearly states: "The body parameter [for res.send()] can be a Buffer object, a String, an object, Boolean, or an Array." If you send a Buffer object, then it will set the Content-Type to “application/octet-stream” unless you set the content-type yourself to something else that is appropriate for the data in the buffer. — jfriend00
– jfriend00, Commented Feb 26, 2021 at 6:54

Patrick Roberts · Accepted Answer · 2021-02-26 07:03:20Z

In Node.js, crypto.randomBytes returns a Buffer. This is the correct type to use for sending raw data to the client.

When using Express, it is important to set the correct content-type of the response using res.type(). However, when sending a Buffer, if the content-type header is not set in any other middleware, then express will use application/octet-stream by default.

When the parameter is a Buffer object, the method sets the Content-Type response header field to "application/octet-stream", unless previously defined.

router.get('/test/*', function(req, res, next) { ... let data = myFunctionThatGeneratesData(); res.type('application/octet-stream').send(data); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ might not be necessary });

And lastly in Angular, using the responseType: 'blob' is correct:

this.http.get('/test/random-bytes-array', { responseType: 'blob' }).subscribe(data => { console.log(data); });

Oh my god... FML... So I went back and try the simplest thing data = buffer; and is working now. Originally I did not use the responseType: 'blob', then I tried many other ways (as shown in my post) to send the binary over with responseType: 'blob' but i never went back to try the simplest data = buffer;!!!!!!

Collectives™ on Stack Overflow

What is the correct way to send ArrayBuffer or Blob across and reconstruct them?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related