Access to the DOM in Mobile

Mobile
1

I have this Preloaded JS function.

It does not work in Mobile because I apparently don't have access to the DOM. (Cannot read property 'createElement' of null)

window.createThumbnail = async function(base64Image, maxHeight = 100) {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.src = "data:image/jpeg;base64," + base64Image;

    img.onload = () => {
      const aspectRatio = img.width / img.height;
      let newWidth = img.width;
      let newHeight = img.height;

      // Check if the height needs to be limited
      if (img.height > maxHeight) {
        newHeight = maxHeight;
        newWidth = maxHeight * aspectRatio;
      }

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      // Set the canvas size to the new dimensions
      canvas.width = newWidth;
      canvas.height = newHeight;

      // Draw the image onto the canvas with the new dimensions
      ctx.drawImage(img, 0, 0, newWidth, newHeight);

      // Convert the canvas content to a base64 thumbnail
      const thumbnailBase64 = canvas.toDataURL("image/jpeg");

      resolve(thumbnailBase64);
    };

    img.onerror = (error) => {
      reject(error);
    };
  });
};

Is this a hard limitation, or is there a way around this?

1 Like
2

Sadly this is a hard limitation, Retool Mobile is designed to run as a native mobile app and for that reason doesn't expose browser APIs like document.createElement, canvas, etc.

I'm not aware of any workaround that would support local image resizing like this. I'd recommend using a web service to do it.

3

Well I tried a Workflow, but it has the same problem which is not surprising. I was excited for a hot second though!

I guess I'll write an Azure function.

Along those lines, is there a way to get to Retool Storage from outside of Retool? I would like to pass the file_id to the function and let it download the file to convert to thumbnail rather than uploading it from the mobile device again.

4

Unfortunately not yet, there's no public Retool Storage APIs yet. You could use Workflows to fetch the base64 data and send it to Azure, but yeah, not ideal...