How to set min/max width and min/max height on uploaded image?

How to set min/max width and min/max height on file picker?

I feel like it is such an easy thing to do in Javascript that it's seems absurd to me that there is no way to do it in Retool.

Hey @gzaccaroni

You should be able to add an event handler to run the following script to validate the image size. In my example I have used 100x100px, but you can change it based on your needs:

function imageSize(url) {
const img = document.createElement("img");

const promise = new Promise((resolve, reject) => {
img.onload = () => {
// Natural size is the actual image size regardless of rendering.
// The 'normal' `width`/`height` are for the **rendered** size.
const width = img.naturalWidth;
const height = img.naturalHeight;
// Resolve promise with the width and height
resolve({width, height});
// Reject promise on error
img.onerror = reject;
// Setting the source makes it start downloading and eventually call `onload`
img.src = url;
return promise;

(async() => {
const imageUrl = 'data:'+fileButton1.files[0].type+';base64,'+fileButton1.value[0];
const imageDimensions = await imageSize(imageUrl);;
if(imageDimensions.height>100 || imageDimensions.width>100) {
utils.showNotification({title:"Image too large!", description:"Image must be less than 100x100px." })

Thank you, it worked!

No problem! Glad it worked!