Getting the width and height from upload value

Try:

img.onload = function () {console.log(this.width)}

Hope it helps!

Where would that go in the code so it gets returned to my other vue component ?

The onload event will only fire if you actually set the src property on the Image instance to a valid file/data URL.

Try doing this:

var img = new Image();
img.onload = function () {console.log(img.width)}
img.src = /* data url */

On your code maybe you could do this:

export default {
        methods: {
            onChange(e) {
                if (! e.target.files.length) return;
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = e => {
                    const src = e.target.result;

                    const img = new Image();

                    img.onload = () => {
                        this.$emit('loaded', {src, file, width: img.width});
                    };

                    img.onerror = () => {
                        this.$emit('error');
                    };

                    img.src = src;
                };
            }
        }
    }

I see! I had to put it inside both the reader.onload and the img.onload. Thanks so much One question. Why do you have the img.src = src at the very end?

The img.src = src is what will set the image file to the image object and, by consequence, fire those events.

It is placed on the very end so we can attach the event listeners before setting it.

As the image is a data URL there is no delay on loading it, so if we loaded it before setting the event handlers they won't be fired.

I see!! Thank you so much for explaining.