Using the imageInput control

App Building
,
1

I wonder if someone can shed some light on how to use the imageInput control for me. I don't seem to find much info. I need to take pictures store and then retrieve them then output them in a PDF, any advice?

1 Like
2

Hello @Autovalu ,

Thank you for your question. I have some suggestions and can share a way that I've used imageInput(I assume this is for a Mobile application?).

  1. Upon taking a snapshot, embed an Event Handler that will call a JS Query to convert the image to a Base64-encoded string.
    Using code like this has worked for me:
 const imageURI = imageInput1.value[0]
               return utils.getDataByObjectURL(imageURI)

Of course, I'm keeping this simple and you can make it as dynamic as you'd like.

  1. After converting the image, I am triggering a second query upon 'Success' - and in this case, I'm storing the Image file in Retool Storage for use later on. One of the keys here is to upload the file after the ',' in the BASE 64 Output, so in the File Content area I would use JS like this:
    {{convertImage.data.split(",")[1]}}

  2. Then, I would create a separate Query for Downloading content from Retool Storage, and selecting "Get contents of a file" from the Action of this query.

  3. Finally, I would write one more query using a JS Query to export and generate a PDF. Here is some sample code:

// JS Code to generate PDF
const doc = new jsPDF();
doc.addImage(BASE64_IMAGE, 'JPEG', 10, 10);
doc.save('output.pdf');

Here is a video as I walk through some of these concepts: Loom | Free Screen & Video Recording Software | Loom

Hope it helps you!

-Brett