postMessage to iFrame

Queries and Resources
1

Hi, I'm trying to send a postMessage (Window.postMessage() - Web APIs | MDN) from a javascript query to an iFrame that I've added to my ReTool application.

But document.querySelectorAll('iframe') returns [] so I haven't been able to access my iFrame from the javascript query to send the message to it. I am able to access myIframeName which has all the properties and methods from IFrame | Retool Component Library but none of those seem to let me get the iFrame HTML element.

Does anyone know how I might accomplish this?

2

Hi @jason_retool --Thanks for reaching out!

Can you share more about your use case for the iFrame?

Unfortunately, I don't believe you'll be able to use postMessage, as Retool queries run in their own sandbox, meaning that the Window.postMessage() function call is buried inside of a sandbox inside of Retool.

3

Hi @Tess

I can jump in and share our use case which is similar to the OP...

We have the requirement to build a video uploader to get around the 40MB file upload limit imposed by Retool. It's a micro app, hosted by us in AWS. It's a simple UI, with an file input and submit button. It uploads the file directly into S3, showing a progress bar, since videos are usually large. Upon completion, we want to use window.postMessage() to communicate the result back to Retool, so a database record can be updated. Ideally, the IFrame component will be on a modal and the completion result will trigger the modal to close among other state changes. It's important that we can communicate with the app running in the Iframe via postMessage.

I'm aware that self-hosted Retool can be configured to upload larger files, however this is not an option for us.

Thanks for your help!

4

Hi @ruswerner Could you use a custom component (just native react) instead of the iframe component? The docs show how to
pass data from your app to your custom component (and vice versa).

Let me know if that sounds like a good workaround!

5

Yes I arrived at this same solution in the interim. We are planning to write a custom component that uses a HTTP POST with a pre-signed URL directly to an AWS S3 bucket. The pre-signed URL will be retrieved securely from our API server just prior to posting the upload. If the solution works well I'll look into sharing the component and sample API code so others can benefit.

6

This is incredibly unhelpful for people coming to this post with other use-cases.

I need to build a PDF editor that needs to communicate with retool to save a template to the database.

Going forward, would it be possible to get answers to actual question instead of just deferring that use-case to another solution?

7

Hi @Mads_Buch,

Thanks for chiming in. I'm happy to take another look at this and help with finding a solution that works for other cases.

I'd love to hear more details about your use case. Is the pdf editor outside of Retool & then the template will be passed to Retool to be saved?

If you're embedding a Retool app inside a PDF editing application, is the parent window query described here more helpful for your use case?

8