How I can get base64 string of image from FileReader

Viewed 215

I am using below 2 methods but I am unable to get back base64 string from it.

function convertFileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
  });
}

function previewProductImages(files){
  let preveiwImagesTemplate = [];
  for(let i=0; i<files.length; i++ ){
      const uploadedImageBase64 = convertFileToBase64(files[i]);
      /// WANT BASE64 HERE So I can pass that to another method
  }
}

Replacement or better approches are welcome.

1 Answers

You should first assign a handler to the onload property - and then call the readAsDataURL() method, not the opposite.

    function readFile(file)
      {
        return new Promise((resolve) =>
        {
          if (file.size)
          {
            const reader = new FileReader();
            reader.onload = (e) =>
            {
              resolve({
                binary: file,
                b64: e.target.result,
              });
            };
            reader.readAsDataURL(file);
          }
        });
      }
Related