Upload to Retool Storage in signature component

Feature Requests
1

Hi! Would be nice to have this feature!
image

But in the signature mobile component. It should be easy to implement, thank you!

2

Hi @pedrowach, I submitted a FR for the "Signature" component to include an "Upload file to Retool Storage" option under interactions. On the meantime, we can achieve this with the following workaround:
​

First, create a JS query to get the base64 string from the data collected on the signature component:

Then, create the query to upload this data to Retool Storage, for the "File content (in base64)" use the output of the previous query:


Finally, if you need to retrieve the signature, create a query to get it:


​

3

Is there a way to do this using a dynamic file name?

4

Yes! We could add a "Text input" component for the user to type in and reference its value on the "File input" field, on the Retool Storage query. Alternatively, we could access the current_user's name and save the file as their name + signature: {{current_user.firstName + current_user.lastName + "_signature"}}

For example:

Screenshot 2024-05-28 at 10.42.06 AM
Screenshot 2024-05-28 at 10.42.06 AM1020×774 40.3 KB

5

Thanks! Thats what I figured out and it’s been working!

Do you know of a way to recall that data to be able to get it added to the pdf generator?

6

You are welcome! :slightly_smiling_face:

To access that data, after the upload query has run, you should be able to get it from the data property of the query:
Screenshot 2024-05-29 at 9.20.05 AM

In this case it would be: uploadImage.data.name. It may be a good idea to use a success event handler on the upload query to automate adding the signature to the pdf.

For more details on how to add data to PDFs, check out this topic from the Community Show & Tell:

7

I tried using uploadImage.data.name and it just added the file name into my PDF not the actual jpg image....any other thoughts on what I could be doing wrong?

8

Sorry, I misunderstood what you where trying to achieve. I have not added an image to a PDF myself, but since we are limited to Markdown in the PDF exporter, I wonder if the following will do the trick:

<img src={{uploadImage.data.url}}
     alt="signature"
     style="float: left; margin-right: 10px;" /> //if positioning is needed

For this to work, the image we uploaded (the signature) would have to be public, which is a security risk.

9

Since you already have access to the image on base64 format form the step above, to prevent the image of the signature from being public, we could just reference the output of the JS query, and create the image from it on the PDF using Markdown:

![signature_image](data:image/png;base64,{{JSqueryThatProvidesBase64.data}})

Source: base64 - Hard Code Markdown Images - Stack Overflow

10

Thanks for your ideas and trying to help me problem solve this!

This is what I am seeing with that code.

Screen Shot 2024-06-01 at 2.22.48 PM
Screen Shot 2024-06-01 at 2.22.48 PM1528×288 19.6 KB

Screen Shot 2024-06-01 at 2.23.27 PM
Screen Shot 2024-06-01 at 2.23.27 PM698×184 23 KB

Screen Shot 2024-06-01 at 2.23.45 PM
Screen Shot 2024-06-01 at 2.23.45 PM988×768 43.6 KB

11

You are welcome! Could you share a screenshot of the output of the "convertsignature" query?

12
  • :"data:image/png;base64,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"
13

Aha! The response already includes data:image/png;base64...

Let's update the Markdown to:

![signature_image]({{convertsignature.data}})
1 Like
14

That worked! Thanks!!!

15

I've seen other topics where users tried to achieve this in the past. Now we have a workaround to share.

Thank you for your patience. It was great working with you on this! :slightly_smiling_face: