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

Issue

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.

Solution

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

Answered By - Patrick Roberts

Answer Checked By - Senaida (PHPFixing Volunteer)