Use Multiple Image Sources for a Single Image Field

Scenario

When using image fields in your app, there are two "Image Source" options available. These determine how users input images:

1. A user can either upload a file stored on his or her computer.

2. Or use a URL from an image already hosted elsewhere on the Internet.

You can also give users both options without having to display multiple image fields in your app interface. This way, users can choose between uploading a new file or using one that already exists on another site.

Requirements

To gain a better understanding of how to add and manage fields, it would be beneficial to acquaint yourself with the process. You can find detailed information about fields here.

Steps

Create Your Upload Image and URL Image Fields

In the Data section of your Builder, create two image fields for the table that needs to display images. You can add a new field by clicking the "+ Add Field" option.

 

Upload Image Field

Add a new image field, name the field "Image Upload," and set the image source to "Upload image files."

 

URL Image Field

Add a new image field, name the field "Image URL," and set the image source to "Load images from an external URL."

 

Create Your Image Field to Display in the Live App

Now that you’ve added fields called "Image Upload" and “Image URL,” create a third image field.

This field should use an image upload as its source, and we will name this “Main Image.” This will be the image field used to display your image in your Live App.

 

Add Conditional Rules to Display Either Upload or URL Images

Next, we need to add conditional rules to the "Main Image" field. To add conditional rules, open the field to edit the field settings and select the "Conditional Rules" tab.

 

Here, we’ll add our conditional rules to dictate which image field value it uses. This will assign the value of other fields to "Main Image" when specific conditions are met.

Add the following conditional rules to "Main Image":

1. When Image Upload is blank, set the value to "Image URL."

2. When "Image URL" is blank, set the value to "Image Upload."

3. When "Image Upload" and "Image URL" are blank, set the value to blank.

4. When "Image Upload" and "Image URL" are not blank, set the value to "Image Upload."

 

 

Set Up Your Live App

Now, you can add the "Main Image" field anywhere you would like the image visible in your Live App.

Make sure also to add both the "Image Upload" and "Image URL" fields to a form view to give your users the option to submit either, and the "Main Image" field will be updated with whatever method your user chooses.