javascript return values from .onload method from image object

Question

I am calling the getFileDimensions in another file. I need this method to return values that are inside .onload() method. The values are right I need just to return them using the outer function.

export const getFileDimensions = file => {
    var reader = new FileReader();

    //Read the contents of Image File.
    reader.readAsDataURL(file);
    var width, height = null
    reader.onload = function (e) {

        //Initiate the JavaScript Image object.
        var image = new Image();

        //Set the Base64 string return from FileReader as source.
        image.src = e.target.result;

        //Validate the File Height and Width.
        image.onload = function () {
            console.log("Image loaded", this.width, this.height)
            height = this.height;
            width = this.width;
            return { width: this.width, height: this.height }
        };
        return { width: width, height: height }
    };
   return { width: width, height: height }
}

Ajil Paul · Accepted Answer · 2021-11-26 15:09:40Z

4

Try using Promises

export const getFileDimensions = async (file) => {
  var reader = new FileReader();

  //Read the contents of Image File.
  reader.readAsDataURL(file);
  var width,
    height = null;
  const result = await new Promise((resolve) => {
    reader.onload = function (e) {
      //Initiate the JavaScript Image object.
      var image = new Image();

      //Set the Base64 string return from FileReader as source.
      image.src = e.target.result;

      //Validate the File Height and Width.
      image.onload = function () {
        console.log("Image loaded", this.width, this.height);
        height = this.height;
        width = this.width;
        resolve({ width: this.width, height: this.height });
      };
    };
  });
  return result;
};

answered Nov 26, 2021 at 15:09

Ajil Paul

3851 gold badge2 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kakakakakakakk Over a year ago

the result is a pending promise

Ajil Paul Over a year ago

call the function using await. await getFileDimensions()

Collectives™ on Stack Overflow

javascript return values from .onload method from image object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related