Using EXIF to find latitude and longitude from a image in Retool Storage

💬 Queries and Resources
1

  1. My goal:
    I have loaded the exif.js (exif-js · GitHub) library
    I want to use EXIF. to read the GPS data from images I have loaded into the Retool Storage and are being returned in table7

  2. Issue:
    EXIF needs a image object but I believe I can't use
    getElementById() in Retool
    and when I try and create an image object and set the src to the URL it does not work.

  3. Steps I've taken to troubleshoot:
    I've tried manually creating the image

var theImage = new Image(); 
theImage.src=table7.selectedRow.url;

I've tried

var theImage = document.createElement("img");
theImage.src=table7.selectedRow.url;

I've tried
var theImage = await utils.getDataByObjectURL(image2.retoolFileObject.url);

when passed to EXIF they all return nothing

  1. Additional info: (Cloud or Self-hosted, Screenshots)
    Cloud
3

Welcome to the community, @Suzy_Bates! Thanks for reaching out. :slightly_smiling_face:

It looks like the particular library you're using is most easily integrated into an app where you have access to the document, which isn't the case inside a Retool app. There is a blurb in its documentation, though, that mentions it may be possible to pass in a File or Blob object.

image
image1718×254 23 KB

Here's a function you can use to convert the raw base64 string into a Blob:

function base64ToBlob(base64, contentType = '', sliceSize = 512) {
  const byteCharacters = atob(base64);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = Array.from(slice).map(char => char.charCodeAt(0));
    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
}

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

4

Thank you! I was able to get this to work.

Perhaps there should be some documentation about how trying to access anything from document.x is not allowed in Retool and it's NOT that you are losing your mind.

Just a suggestion.

1 Like