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

App Building
,
1

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.

2

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);

  console.info(imageDimensions);
  if(imageDimensions.height>100 || imageDimensions.width>100) {
    utils.showNotification({title:"Image too large!", description:"Image must be less than 100x100px." })
    fileButton1.clearValue()
  }
})();
3

Thank you, it worked!

4

No problem! Glad it worked!