Downloading files from Azure Blob Storage using Azure Function returns different file size

We are trying to serve files hosted in Azure blob storage using an Azure Function. When fetching them we get the following error:

Uncaught (in promise) Error: Length in header does not match actual data length: X != Y

I’m not very well-versed in these kinds of things but our devs are wracking their brains and I’m coming up empty as well.

The snippet in our Azure Function that we believe is the culprit is this:

const streamToBuffer = async (readableStream) => {
  return new Promise((resolve, reject) => {
    const chunks = [];
    readableStream.on('data', (data) => {
      chunks.push(data instanceof Buffer ? data : Buffer.from(data));
    });
    readableStream.on('end', () => {
      resolve(Buffer.concat(chunks));
    });
    readableStream.on('error', reject);
  });
};

EDIT:

    const blobClient = containerClient.getBlobClient(path);

    if (await blobClient.exists()) {
      const downloadBlockBlobResponse = await blobClient.download();

      const content = (
        await streamToBuffer(downloadBlockBlobResponse.readableStreamBody)
      ).toString();

EDIT2:

Errors in the trace:

Uncaught (in promise) Error: Can not parse environment file at god3.js:16
Uncaught (in promise) Error: Length in header does not match actual data length: X != Y
Error while trying to use the following icon from the Manifest: $url (Download error or resource isn't a valid image)

We are only encountering this issue while serving the data through an Azure Function. We have tried hosting the logic on a different platform and it works when pulling the files.

Additional part of the function:

  const containerClient = blobServiceClient.getContainerClient('site');

    const blobClient = containerClient.getBlobClient(path);

    if (await blobClient.exists()) {
      const downloadBlockBlobResponse = await blobClient.download();

      const content = (
        await streamToBuffer(downloadBlockBlobResponse.readableStreamBody)
      ).toString();

      context.res = {
        headers: {
          'Content-Type': downloadBlockBlobResponse.contentType,
        },
        body: content,
      };
    } else {
      context.res = {
        status: 404,
      };
    }
  } else {
    context.res = {
      status: 401,
      headers: { 'WWW-Authenticate': 'Basic realm=Access to the staging site' },
      body: { success: false },
    };
  }
};

Any pointers would be very appreciated.

Thank you

Answer

We found the problem.

We were stringifying binaries, which BabylonJS didn’t appreciate.

The solution was to add a filetype check in the function.

      const content = await streamToBuffer(
        downloadBlockBlobResponse.readableStreamBody,
      );
      const fileType = path.split('.').slice(-1)[0];
      context.res = {
        headers: {
          'Content-Type': downloadBlockBlobResponse.contentType,
        },
        body: textPlainType.has(fileType) ? content : content.toString(),
      };