Table of Contents

Use Multiple Image Sources for a Single Image Field

Danielle Kellogg Updated by Danielle Kellogg

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

It may be helpful to familiarize yourself with how to add and manage fields. You can read more about fields here.

Steps

Create Your Upload Image and URL Image Fields

In the Schema section of your Builder, create two image fields for the object 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 for 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 value to Image URL.
  2. When Image URL is blank, set value to Image Upload.
  3. When Image Upload and Image URL are blank, set value to blank.
  4. When Image Upload and Image URL are not blank, set 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 to also add both "Image Upload" and "Image URL" fields to a form view to give users the option to submit either and the "Main Image" field will be updated with whatever method your user chooses.

This can be adapted to other fields as well (Address, preferred name, phone number).

How did we do?

Store Multiple Images or Files for Individual Records

Create a Button or Link that Updates a Field to a Custom Value

Contact