return error after convert file Input to Base 64

Question

according to How to convert the file to base64 in JavaScript? I found a way to convert the image to base64 in javascript based following :

//My Converter Function
        function getBase64(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            console.log("befor");
            console.log(reader.result);
            console.log("after");
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };
    }

and I use it by:

getBase64(file).then(
    data => (Image64bit = data)

It seems I got 64bit string But I return this error every time: (notice that without "then" it wont return anything)

zone.js:192 Uncaught TypeError: Cannot read property 'then' of undefined at UploadFileAndGetUrl (doctors.js:14949) at HTMLButtonElement. (doctors.js:14703) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496) at invokeTask (zone.js:1540) at HTMLButtonElement.globalZoneAwareCallback (zone.js:1566)

befor

doctors.js:14992 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAH0CAMAAADynrlKAAACBFBMVEUAzG9U1pBn2Zskz3vV8+H////g9umH4K71/Pjr+fHJ8Nm97dE/04aj5sCW47d43aSw6sg1143j+e801owDzXHS9ubQ9uRm4..... doctors.js:14993

after

How Could I resolve this error?

Answer 1

zone.js:192 Uncaught TypeError: Cannot read property 'then' of undefined at

FunctiongetBase64 doesn't return a Promise.

You need to correct getBase64 in the way that it returns a Promise and been resolved inside of reader.onload with the value of reader.result:

function getBase64(file) {
  return new Promise(resolve, reject) => {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log("befor");
      console.log(reader.result);
      console.log("after");
      resolve(reader.result);
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
      reject(error);
    };
  }
}

Answer 2

No value is returned from the function, see Why is value undefined at .then() chained to Promise??.

FileReader load event is asynchronous, a value cannot be returned from the event handler. You can use Promise or async/await to resolve a Promise where the value can be accessed at chained .then(), and .catch() to an handle error.

  function getBase64(file) {
    return new Promise((resolve, reject) => {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        console.log(reader.result);
        resolve(result);
      };
      reader.onerror = function (error) {
        console.log('Error: ', error);
        reject(error);
      };
    });
  }

  getBase64(file).then(
    data => {  
      // do stuff with data
  })
  // handle error
  .catch(err => console.error(err))