How to use readAsArrayBuffer method from FileReader after fetch and get correct size?

Question

I want to have access to ArrayBuffer from remote URL. So, I created the function:

        fetch('some url')
            .then(function(response) {
                const file = new File([response], response.url, {type:'image/jpg'});
                const reader = new FileReader();
                reader.readAsArrayBuffer(file);
                reader.onload = function(e) {
                    const dataURL = reader.result;
                    console.log(dataURL);
                };
            })

And I've got the wrong ArrayBuffer size: ArrayBuffer(17 = length of my Url) instead of real image size (about 24000, I think). What's the problem here?

What happens if you use [`arrayBuffer()`](https://developer.mozilla.org/en-US/docs/Web/API/Body/arrayBuffer) instead? `fetch("example.com").then(res => res.arrayBuffer()).then(someBuffer => {// Use the buffer});` — zero298, Aug 27 '18 at 15:39

score 0 · Accepted Answer · answered Aug 27 '18 at 15:53

If you're after an ArrayBuffer of the requested resource, cut out the File middleman and just have the response give you the Buffer directly with Body.arrayBuffer().

const url = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

fetch(url)
  .then(res => res.arrayBuffer())
  .then(someBuffer => {
    console.log(someBuffer.byteLength);
  });

The base64 encoded image used in the code above came from this answer here: How to display Base64 images in HTML?.

How to use readAsArrayBuffer method from FileReader after fetch and get correct size?

1 Answers1