moses's avatar
Level 2

Why return is not working in the img.onload on the vue component?

I have vue component like this :

<template>
    <section>
        ...
    </section>
</template>
<script>
    export default {
        ...
        data() {
            return {
                allowableTypes: ['jpg', 'jpeg', 'png'],
                maximumSize: 4000000
            }
        },
        methods: {
            ...
            onFileChange(e) {
                if (this.validate(e.target.files[0])) {
                    let files = e.target.files,
                        reader = new FileReader()
                    // if any values
                    if (files.length){
                        reader.onload = (e) => {
                            this.image = e.target.result
                        }
                        reader.readAsDataURL(files[0])
                    }
                }
            },
            validate(image) {
                // validation file type  
                if (!this.allowableTypes.includes(image.name.split(".").pop().toLowerCase())) {
                    return false
                }
                // validation file size
                if (image.size > this.maximumSize) {
                    return false
                }
                // validation image resolution
                let img = new Image()
                img.src = window.URL.createObjectURL(image)
                let self = this
                img.onload = function() {
                    let width = img.naturalWidth,
                        height = img.naturalHeight

                    window.URL.revokeObjectURL(img.src)

                    if(width != 850 && height != 350) {
                        return false
                    }
                }
                return true
            }
        }
    }
</script>

If user upload image, it will call onFileChange method. Before display the image, it will call method validate to validate the image

I try validate file size and file type and it works

My problem here is validate the resolution

From my code, it seems my code is true

But I try like this :

I upload image with width = 100, height = 100

From the code, should it return false

But when I run my code, it return true

Seems return is not working in the img.onload

How can I solve this problem?

0 likes
2 replies
topvillas's avatar

The validate function is returning before the onload callback has a chance to run.

Try using a Promise.

moses's avatar
Level 2

@topvillas I'm still confused to implement the promise in my case. Please answer with the code

Please or to participate in this conversation.