Availability of aspect ratio validation

[enkhtulga]

Thank you for this awesome component. Is there any event before upload image? I want to check image aspect ratio before upload image. For example. If someone try to upload image with aspect ratio 4:2, then it's impossible to upload. Because i set image aspect ratio to 4:3. By the way, I really want to get event before upload image.

Any Suggestion would be greatly appreciated. Thank you

[enkhtulga]

@svale

[svale]

Hi @enkhtulga. Thank you very much for your patience with my late reply!

There is an notification event triggered as soon as a file is read (@onUpload), but if you need any logic based on the file properties (like the aspect ratio), it seems you would need access to the file data itself.

So what I think what you could use is dimensions/aspec ratio output that lets test for criteria like this. Hope to include that in an update I'll publish this weekend.

[svale]

Ok, so with the latest update (2.1.0), you should be able to check the aspect ratio on your upload.
Basically something like this:

    <image-uploader
      :preview="false"
      outputFormat="verbose"
      @input="onUpload"
    >

Disable the built in preview, set output to verbose and handle the logic in a custom method:

  methods: {
    onUpload: function(image) {
      const aspectRatio = image.info.aspectRatio
      if (aspectRatio !== 1.33) { //4:3
        //abort
        this.upload = false
        alert('Error: Wrong aspect ratio')
      } else {
        // continue
        this.upload = image.dataUrl
      }
    },
  }

Check for any constraints with the info.aspectRatio property (or width/height) and go on from there.

Thank you for the input! Fell free to re-open of this doesn't work as expected.