How to validate image dimensions of an uploaded image

App Building
,
1
  • Goal: I am using a file button component to upload single file of type .png. I need to validate the dimensions of this image. How can I do that?
2

Hello @Varun_Damani

For the png validation to upload file using file button you can use this code in the custom validation of the file button :
{{ self.value.length > 0 ? self.value[0].type !== 'image/png' ? "Please select a PNG file" : "" : "" }}
image
image

And
The file upload button is not providing functionality for the image dimensions

1 Like
3

Hey @Varun_Damani! Thanks for reaching out. This isn't something that Retool natively supports, but there's definitely a workaround. :+1:

Attaching an image to the fileButton component exposes the following data, none of which immediately tells us its dimensions:

image

However, it's possible to construct a data URL for this image and read its dimensions that way.

image
image1056×596 44.5 KB

In this particular example, I've also defined a variable called imageValidation that I reference from within a custom validation rule.

image

I hope that helps! Let me know if you have any additional questions.

2 Likes