How to store uploaded photos from drawer component into retool database

💬 Queries and Resources
1

Hi Retool Community,

I'm working on a Retool app where users can upload photos through a Drawer component (using a File Input inside the Drawer). I'd like to store these uploaded photos in the Retool Database, but I'm unsure of the best approach.

Here's what I'm trying to achieve:

  • User opens a Drawer (e.g., to create or edit a record).
  • Inside the Drawer, they upload one or more photos using a File Input component.
  • On form submission, I want to save those uploaded photos to my Retool Database and generate a PDF.
    image
    image1302×1026 53.7 KB
2

Hi there @parnian94,

When a file is uploaded, you can access the file metadata and base64 and use that to visualize/download a pdf, see below screenshot:

image
image1884×402 86.9 KB

There are several ways to download a pdf when you have a file's data, one example is retool's provided utils, .e.g

utils.downloadFile({ base64Binary: fileDropzone1.value[0].base64Data }, fileDropzone1.value[0].name, 'pdf');

Let me know what further guidance you need and what is your user flow so we can further help. Do you want to generate a pdf out of any other file type? This requires a different approach.

2 Likes
3

The documentation on file upload is pretty good here too.

1 Like
4

Hi Miguel,
thanks for the response.
My main question is about storing the photos and then creating the PDF out of it.
Could you please help with storing the photos in retool database?

1 Like
5

Ah, that is another topic completely, and not one I'm very well versed on, unfortunately.

I saw this post here

And you could try it yourself, the free version of the tool has 250 conversions per month, and you could convert any type of images to pdf using a simple post operation (doc here

POST https://v2.convertapi.com/convert/images/to/pdf \
 -H "Authorization: Bearer api_token" \
 -F "Files[0]=@/path/to/my_file.png"

However, I'm sure other people from the forum may be able to help with proper code to achieve what you need. With the above, you could hit the api, which would return the file data, which you can then store in yoru retool database.

1 Like
6

Thanks everyone for the help on this one @MiguelOrtiz and @dcartlidge!!

For converting an image file to a PDF @parnian94, that is unfortunately not a current feature of Retool. It has been heavily requested so that may change in the future but I am not sure if it is close on our current roadmap.

To accomplish this you would need to use a third-party service provider as outlined in the post Miguel shared where the user sends the file data via a REST API request and are returned a PDF file that can be then stored in a DB such as Retool DB.