How to upload multiple images in a table in Retool?

Hi
The tutorial in the following link only shows how to upload a single image and replace one image.

Any help would be greatly appreciated.

I would like to be able to upload multiple images or a PDF instead.

This is a very common issue. I’ve searched for information but couldn’t find a solution.

Has no one else encountered this?

Don’t you add images through a table?

Hey @April_Fgt

I don't this there is a any kind of features like this that you are saying for the multiple photo upload.

But you can open the modal on it and use the file input to upload multiple images.



3 Likes

Hello @April_Fgt, the intention of the Image column in a Table is to display one image at a time. If you need to upload multiple images at once, you can follow the steps @WidleStudioLLP suggested. May I know what you’re trying to do so I can help you better with your specific use case?

1 Like

WidleStudioLLP's instructions are very detailed. I followed the screenshots step by step, tried countless times, and even asked ChatGPT — but I still haven’t been able to achieve my goal of displaying the uploaded images inside the table.

I just started using Retool. My goal is to move my personal data from Airtable to Retool.
I need to display a lot of images directly in Table1, POD.




Hey @April_Fgt

I believe displaying multiple images directly within a table might not be the most practical approach. A better alternative could be to use a button in the table row. When the button is clicked, it can open a modal displaying the images associated with that user.

Or you can use the html in retool table to show the multiple data


Using HTMl you can show the multiple images

3 Likes

Hey @April_Fgt, we don’t have native support for displaying multiple images in a single column in the Table component in Retool. Here’s a screenshot of how Airtable displays images. Is this the kind of setup you’re looking for?

If so, like @WidleStudioLLP mentioned, you can create an HTML column with multiple <img> tags. Alternatively, if you’re looking for a different user experience, you can use an expandable row, which we do support. See the screenshot below for an example.

2 Likes

hi

I already saw the solution last weekend, but I still haven’t been able to implement uploading and displaying multiple photos at the same time.

I also haven’t been able to figure out how to link images from Retool Storage with currentSourceRow.

Your Airtable images are correct. I run a logistics company, and each project often includes multiple image proofs.

Right now, I’m trying to use Retool to build my system. But since I don’t have a coding background, my questions may sound very basic — like a grade schooler. I’m currently studying materials from Retool University to learn more.


My goal is exactly like what you showed in the image.
Can you help me achieve it step by step?
I'm using RetoolDB and Retool Storage.

That's what I'm here for, @April_Fgt! :blush: Yes, Retool University is a great place to start learning about Retool. You can also search for any topic in our docs, they’re super helpful!

And of course, the community forum is always a great place to ask questions, you’re doing all the right things!

I believe I understand what you're trying to do. Here's a step-by-step guide to link images from Retool Storage and display them in your Table using expandable rows:

Steps:

  1. Upload your images to Retool Storage. You can organize them into folders (e.g., dog images) if you'd like.
  2. Create a query that lists files from the folder. You can call it getImages. Run it to confirm the output contains image URLs.
  3. Add a Table component and bind it to a data source.
  4. Follow my instructions in the previous response to enable expandable rows in your Table component if you haven’t already.
  5. In the expandable row section, add an ImageGrid component.
  6. Under Mode, set it to Mapped.
  7. Set the Data source to: {{ getImages }}
  8. In the Source field, use: {{ item.url }}
  9. Optionally, adjust the Column count in the Appearance tab if you'd like to show more images per row.

You should now see something like the example below, the dog images displayed neatly inside each expandable row! :tada:
Let me know if this was helpful!

2 Likes

hi
Thank you so much for your response — I was able to implement the image feature quite easily, and I feel like I’m very close to achieving my goal.
My goal is to have different images for each row. For example, Item 1 should display the image I uploaded for Item 1, and Item 2 should display a different image I uploaded for Item 2.
(Currently, all rows are showing the same image from Retool Storage.)



Thanks for explaining, that helps a lot, @April_Fgt! I'm going to show you screenshots of what I have at each step.
1. Here’s my configuration for fileDropzone1:


By setting the Form Data Key to {{ table1.selectedRow.id }}, each file is uploaded into a folder named after the selected row’s ID in table1. This helps group or identify files based on the row they belong to.

2. I used an event handler to trigger the uploadImages query


This code loops through all the files selected in the fileDropzone1 component and uploads each one individually.

For each file, it triggers the uploadImage query (see the screenshot below) and passes in some extra data (fileName, fileData, and folderName) using the additionalScope object.

  • fileName: the name of the uploaded file
  • fileData: the base64-encoded content of the file
  • folderName: the ID of the selected row in table1, used to organize the uploaded files into folders

3. This is my query for uploadImage

4. This is my query for getImages


This setup shows images linked to each row in the table. When a row is expanded, the getImages query runs using the row’s ID as the folder name. The imageGrid1 then displays the images from that folder using {{ item.url }} as the source.

Now you should be able to upload images to the column and have them display in the same column as well! Here's the JSON file of my example app.
MultipleImagesApp.json (79.8 KB)
Feel free to download it and take a look at how I set everything up! :smile:

6 Likes