readAsDataURL async/await

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 :-)

Don't even use a FileReader here. Simply create a blob: URL using `URL.createObjectURL(file)`. This will save memory, trees and a closure. — Kaiido, Nov 19 '21 at 14:04
@Kaiido `reader.readAsDataUrl` and `URL.createObjectURL` do not yield the same result. Check out [this](https://jsfiddle.net/Fleuv/tjqancw0/) example. — luukvhoudt, Sep 30 '22 at 07:59
@luukvhoudt who said they did? My point is that to show the image, like OP is doing, it's better to use a blob: URL rather than a data: URL. See https://stackoverflow.com/questions/59020799/which-function-should-i-use-todataurl-or-toblob/59025746#59025746 — Kaiido, Sep 30 '22 at 08:04

Achshar · Accepted Answer · 2021-11-19T14:09:22.193

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)

readAsDataURL async/await

1 Answers1