readAsDataURL async/await [duplicate]

Question

I'm trying to resize a file which I get from Quill and send it to a server. This is what I have

async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
  // Resizing
  var newFile
  const reader = new FileReader();
  reader.onload = function (e) {
      var img = document.createElement("img");
      img.onload = function (event) {
        // Dynamically create a canvas element
        var canvas = document.createElement("canvas");
        
        // var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // Actual resizing
        ctx.drawImage(img, 0, 0, 300, 300);

        // Show resized image in preview element
        canvas.toBlob(blob => {
          newFile = blob; 
          console.log(newFile)                           
        });
      }
      img.src = e.target.result;
    }
  reader.readAsDataURL(file);

  console.log(newFile)
  //Sending data to server 
}      

I want to make this code work in an 'async/await' way, so the second console.log(newFile) would also return a correct value, unfortunately, I don't get how to update the code.

Any help is massively appreciated :-)

Answer 1

You need to put it inside a promise.

    var newFile

    const reader = new FileReader();

    const promise = new Promise(resolve => {
            reader.onload = function (e) {
                var img = document.createElement("img");
                img.onload = function (event) {
                    // Dynamically create a canvas element
                    var canvas = document.createElement("canvas");
                    
                    // var canvas = document.getElementById("canvas");
                    var ctx = canvas.getContext("2d");

                    // Actual resizing
                    ctx.drawImage(img, 0, 0, 300, 300);

                    // Show resized image in preview element
                    canvas.toBlob(blob => {
                        newFile = blob; 
                        console.log(newFile) 
                        resolve();
                    });
                    
                }
                img.src = e.target.result;
            }
    });

    reader.readAsDataURL(file);

    await promise;

    console.log(newFile)