how do I get the width and height values from this object in javascript

Question

I am using dropzone and cropper to upload a file. I can't figure out how to reference the chosen images width and height.

This is the relevant code:

Dropzone.options.myDropzone = {
    url: '{{ route('user.upload') }}',
    transformFile: function(file, done) {

        console.log(file);
        //console.log(file[height]);

        for (var property in file) {
            output = property + ': ' + file[property]+'; ';
            console.log(output);
        }

The console.log(file) line outputs this:

So it has the height and width.

The looping through the properties of file output this:

Anyone know how to access height and width here?

Thanks.

EDIT

Thanks to @kmoser this is the code that is working now.

transformFile: function(file, done) {

    console.log(file['height']);

    var width = 0;
    var height = 0;
    var reader = new FileReader(); 
    reader.onload = (function(file) {
        var image = new Image();
        image.src = file.target.result;
        image.onload = function() { 
            height = this.height;
            width = this.width;
            console.log('1 '+width);
            console.log('1 '+height);
        }; 
    });
    reader.readAsDataURL(file)

    console.log('2 '+width);
    console.log('2 '+height);
    if (width > height)
    {
        console.log('wider');
    }
    else
    {
        console.log('tall');
    }

The only issue is that the console.log('2 '+width); outputs before the console.log('1 '+width);

Can I make it wait?

EDIT 2

Figured this out as well.

async function readFileAsDataURL(file) {
    let result_base64 = await new Promise((resolve) => {

        let reader = new FileReader(); 
        reader.onload = (function(file) {
            var image = new Image();
            image.src = file.target.result;
            image.onload = function(file) { 
                height = this.height;
                width = this.width;
                console.log('1 '+width);
                console.log('1 '+height);
                resolve(reader.result);
            }; 
        });
        reader.readAsDataURL(file)

    });
    return result_base64;
}

Dropzone.options.myDropzone = {
    url: '{{ route('user.upload') }}',
    transformFile: async function(file, done) {

        let result = await readFileAsDataURL(file);

        console.log('2 '+width);
        console.log('2 '+height);
        if (width > height)
        {
            console.log('wider');
        }
        else
        {
            console.log('tall');
        }

Works great! Thanks for the help!

Answer 1

Final Solution

async function readFileAsDataURL(file) {
    let result_base64 = await new Promise((resolve) => {

        let reader = new FileReader(); 
        reader.onload = (function(file) {
            var image = new Image();
            image.src = file.target.result;
            image.onload = function(file) { 
                height = this.height;
                width = this.width;
                console.log('1 '+width);
                console.log('1 '+height);
                resolve(reader.result);
            }; 
        });
        reader.readAsDataURL(file)

    });
    return result_base64;
}

Dropzone.options.myDropzone = {
    url: '{{ route('user.upload') }}',
    transformFile: async function(file, done) {

        let result = await readFileAsDataURL(file);

        console.log('2 '+width);
        console.log('2 '+height);
        if (width > height)
        {
            console.log('wider');
        }
        else
        {
            console.log('tall');
        }

Answer 2

To call the attributes use dot

console.log(file.height);

Answer 3

To access Height and Width, you can use either of them.

console.log(file['height']); 

OR

console.log(file.height);

Both will give same result. Dot is used when you are sure of some value present in the attribute, while other way you can use when you are not sure whether it will be undefined or some value will be there