Javascript Fetch API with multiple ranges request get binary Float32Array data

Question

I am using range request to read many 32 bit float from a large binary file, unfortunately the float I need from this file is at different part of the file, hence I need to do range request with multiple ranges

fetch("http://example.com/largeBinaryFile.bin", {
        headers: {
            'content-type': 'multipart/byteranges',
            'range': 'bytes=2-5,10-13',
        },
    })
    .then(response => {
        if (response.ok) {
            return response.text();
        }
    })
    .then(response => {
        console.log(response);
    });

Because of the multiple ranges, I have to use text instead of arrayBuffer, and when I print out the response I get

--00000000000000000002
Content-Type: application/octet-stream
Content-Range: bytes 2-5/508687874

1ȹC
--00000000000000000002
Content-Type: application/octet-stream
Content-Range: bytes 10-13/508687874

þC
--00000000000000000002--

As you can see, the binary data are in different parts, I have tried using Blob and FileReader to turn the data into arrayBuffer and wrap it with Float32Array but with no success. May I ask how do I get the 32 bit float value from the multiparts? Thank you so much in advance for your help.

Pamphylia

This question might help you. – Ruysdael

Thank you @MikeMcCaughan, that is to assemble the parts and send, but I am trying to read the multiplart – Pamphylia

Did you ever find any answer to this? as I would like to utilise a similar approach, where my server might return multiple blocks; I'm currently putting my JSON response into an array, which gets confusing when trying to Type cast them based on particular keys and such... – Cloutier

Posted a answer and also added additional info for @GuyPark commented case. – Auriferous

Answer 1

Hi i am Frank a Chromium Engineer Here are Some deep internals that i use in my https://github.com/stealify/stealify project to binary interop with chromium.

const charset = 'x-user-defined';

// Maps to the UTF Private Address Space Area so you can get bits as chars
const binaryRawEnablingHeader = `text/plain; charset=${charset}`;

// UNICODE Private Area 0xF700-0xF7ff.
const convertToAbyte = (chars) => 
  new Array(chars.length)
    .map((_abyte,offset) => chars.charCodeAt(offset) & 0xff);

const _BinaryRawFetch = (url) => fetch(url,{ headers: { 
  'Content-Type': binaryRawEnablingHeader,
  'range': 'bytes=2-5,10-13'
}}).then(
    (res) => convertToAbyte(res.text())
);

to turn that into for example text results you would need something that slices the correct complet json parts out of that you know the size of each and then process that with codePointAt like done before with the byte but only .map(String.codePointAt) codePointAt will turn that into valid UTF 8 Chars. If needed. I only wrote that for the commenter with his JSON Array.

Auriferous