Table of Contents

Store Multiple Images or Files for Individual Records

Lesley Updated by Lesley

Scenario

Your app stores images and you need to store a variable number of images/files for a single record.

Example: You have an app that manages real estate and you want to display multiple images for each listing.

It is possible to add multiple image or file type fields to a single table, however, this will only allow you to add a finite number of images/files to a single record. For example, four image fields in an table means each record can only have four images associated with that record.

This scenario will allow you to add an unlimited number of images or files connected to a single record.

Requirements

You will need an existing table with records that you want to store multiple images for. In this example, it's the "Listings" table.

Further, if this your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by reading our Builder Basics section. 

Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.

Steps

These steps will cover how to use a connected table to store multiple images for individual records.

Create a New Images/Files Table

In the Data section of the Builder, click on the green "+" button and create a new table named "Images".

Next, click on the green "+" button to add a new Image field type to your new "Images" table and delete the default short text field.

You may also want to add an additional fields such as an auto increment field to provide a unique identifier for each record:

Add a Connection Field

Next, we need to connect your new Images table to the table these images are being stored for. In this case, it is the Listings table.

In the Images table, add a new connection to the Products table by clicking the green "+" button in the connections section on the right side of the Builder.

Select the Listings table and the type of connection. In this scenario, each Image connects with one Listing and each Listing connects with many Images.

Create a Form to Add Connected Images/Files

In the Pages section of the Builder, select a details page for the Listings table (or whichever table you connected to your Images table). Then, click "+ Add View" and select a form view. This will prompt you to choose what type of record the form will create and what it will be connected to. In this case, we are submitted a form view that creates Images connected to that page's Listing.

If you set the form to automatically reload, Live App users can continue to add more images as needed.

You can read more about adding and managing forms here.

Displaying the Connected Images

In the Pages section of the Builder, click the "+ Add View" button to add a view that displays all the connected Images for a specific Listing. In this example, we will add a list view to display images connected to the Listing on this page:

Login & Test

Now, you have set up your Images to display for connected Listings. While viewing your page in the Pages section of the Builder, click the open icon or the "Go to Live App" button. This will open your Live App in a new window.

How did we do?

Add Stages to Your App

Use Multiple Image Sources for a Single Image Field

Contact