Return to Answer

const blobToBase64 = async blob => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result)
    reader.error = (err) => reject(err)
    reader.readAsDataURL(blob)
  })
}

const url = 'https://i.sstatic.net/RRuCp.png'

const fetchImage = async url => {
  const response = await fetch(url, {
    mode: 'no-cors',
  })
  const blob = await response.blob()

  return blob
}

const blobToBase64 = async blob => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result)
    reader.error = (err) => reject(err)
    reader.readAsDataURL(blob)
  })
}

const loadImage = async() => {
  const imageBlob = await fetchImage(url)
  const imageBase64 = await blobToBase64(imageBlob)
  
  console.log({imageBase64})
}

loadImage()

const blobToBase64 = async blob => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result)
    reader.onerror = err => reject(err)
    reader.readAsDataURL(blob)
  })
}

const url = 'https://i.sstatic.net/RRuCp.png'

const fetchImage = async url => {
  const response = await fetch(url, {
    mode: 'no-cors',
  })
  const blob = await response.blob()

  return blob
}

const blobToBase64 = async blob => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result)
    reader.onerror = err => reject(err)
    reader.readAsDataURL(blob)
  })
}

const loadImage = async() => {
  const imageBlob = await fetchImage(url)
  const imageBase64 = await blobToBase64(imageBlob)
  
  console.log({imageBase64})
}

loadImage()

The answer from @Arun Killu is a good snippet if you know what is going on, but I think nobody has explained what was the error on the original code. For people using async and Promise calls this is error is soo obvious but for people learning or without experience it is not so clear.

Bad code

Above code is trying to capture a binary string on source variable, however, FileReader.readAsBinaryString() returns undefined. Moreover, the result will be available when the event onload will be triggered. As we can see, he is trying to console.log the event.target.result value, which is a wrong approach.

The answer from @Arun Killu is a good snippet if you know what is going on, but nobody has explained what was the error on the original code. For people using async and Promise calls this is error is soo obvious but for people learning or without experience it's not so clear.

The Bad code

Above code is trying to capture a binary string on source variable, however, FileReader.readAsBinaryString() returns undefined. This is because the result will be available whenever the event onload will be triggered. As we can see, he was trying to console.log the event.target.result value, which is a wrong approach.

The Good code

The answer from @Arun Killu is a good snippet but I think nobody is explaining what was the error. For people using async and Promise calls this is obvious but for people learning it is not so clear. Here a simple explanation.

Above code is trying to capture a binary string on source, however, FileReader.readAsBinaryString() returns undefined. Moreover, the result will be available when the event onload will be triggered. As you can see he is trying to console log the event.target.result value, which is a wrong approach.

Well young Padawan, asynchronous means that we don't know when the result will be ready it can be different in each system and also can have errors.

So if a process is asynchronous is a good practice to encapsulate it using an async method like this:

How we can intragrate it to our code?

Super easy, just replace all the FileReader with the function blobToBase64 and call it like this imageBase64 = await blobToBase64(imageBlob) Check this snippet

The answer from @Arun Killu is a good snippet if you know what is going on, but I think nobody has explained what was the error on the original code. For people using async and Promise calls this is error is soo obvious but for people learning or without experience it is not so clear. 

Here a simple explanation.

Above code is trying to capture a binary string on source variable, however, FileReader.readAsBinaryString() returns undefined. Moreover, the result will be available when the event onload will be triggered. As we can see, he is trying to console.log the event.target.result value, which is a wrong approach.

Well young Padawan, asynchronous means that we don't know when the result will be ready, it can be different in each system and depends on how heavy or complex is the process and also it can find some errors that will not produce any result at all.

So if a process is asynchronous is a good practice to encapsulate it using an async method and returning a Promise like this:

Ah okay Teo, but what is a Promise?

Good question my young fella. A Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. In other words, will tell us if the result is ready and will give us its value, otherwise will return an error.

How can we integrate it into our code?

Super easy, just replace all the FileReader with the function blobToBase64 defined above and call it like this imageBase64 = await blobToBase64(imageBlob)

Check this snippet: