I made an API call to an endpoint and it returns this:

const test = () => {
    fetch(endpoint)
      .then((response) => {
        console.log(response.body)
      })
      .catch((err) => {
        console.log(err);
      });
  };

How can I obtain the ReadableStream in a Base64 format? This is returning a png file.

I made an API call to an endpoint and it returns this:

const test = () => {
    fetch(endpoint)
      .then((response) => {
        console.log(response.body)
      })
      .catch((err) => {
        console.log(err);
      });
  };

How can I obtain the ReadableStream in a Base64 format? This is returning a png file.

• javascript
• encoding
• base64
• fetch

• 1 have you tried reading the fetch documentation? – Daniel A. White Commented Sep 6, 2020 at 17:57

1 Answer 1

Using this answer, you can get the blob and convert it to base64.

const test = () => {
    fetch(endpoint)
      .then((response) => {
        return response.blob();
      })
      .then((blob)=>{
          var reader = new FileReader();
          reader.readAsDataURL(blob); 
          reader.onloadend = function() {
              var base64data = reader.result;                
              console.log(base64data);
          }
      })
      .catch((err) => {
        console.log(err);
      });
  };

MDN on .blob()