When using image fields in your app, there are two "Image Source" options available. These determine how users input images. A user can either upload a file stored on his or her computer, 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.
Create Your URL and Upload Image Field
In your builder, create two image fields for the object that needs to display images.
Call one image upload, and set its source to be uploaded files:
The second will be called Image URL, and should use an existing image’s URL as its source:
Create Your Main Image Field
Now that you’ve added fields called "Image Upload" and “Image URL,” create a third image field. This one should use an image upload as its source. We’ll call it “Main Image.” This will be the field used to display images in your app interface.
Set Conditional Rules for Your Main Image
Next, we need to add conditional rules to the "Main Image" field:
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":
- When Image Upload is blank, set value to Image URL.
- When Image URL is blank, set value to Image Upload.
- When Image Upload and Image URL are blank, set value to blank.
- When Image Upload and Image URL are not blank, set value to Image Upload.
Set Up Your Interface
Now you can add the "Main Image" field anywhere you would like the image visible in your app.
Make sure to also add both "Image Upload" and "Image URL" fields to a form view, and the "Main Image" field will be updated with whatever method your user chooses.
Knack Tip This can be adapted to other fields as well (Address, preferred name, phone number).