Camera, Images & Files

This article explains the Camera, Images & Files block that can be added to design an app.

Use Cases

1. Capture images using the phone camera
2. Upload images or files from galleries/folders
3. Upload short videos
4. Force users to capture live photos

Editing the block

Click on the block and start editing on the panel that appears on the right side.

Label

This is what appears as the label for the field that suggests the user upload a file or capture an image.

Description

This is the text that goes below the attached file to help the user.

Allowed File Types

By default, all kinds of files are allowed to be uploaded. If you want a limited type of file, you should click on the file types that you want to allow.

Force Camera Capture

Tick this option if you want to force the end-users to capture images from their phone camera or web camera and not upload old photos from their galleries. For this option to work, please ensure that in the File Types option above, only Images (Camera Uploads) is selected.

Required

Enable this option if you want the end-user to compulsorily upload a file or capture an image.

Advanced Options

Use this option to show the advanced options to configure the camera block.

Save Image to Gallery

When enabled, captured images will be automatically saved to the user’s device gallery.

Allow to Edit Captured Image

When this option is enabled, users can annotate photos before uploading them. They can draw annotations, markers, or custom text directly on the captured image. This enhances the functionality by allowing users to highlight specific parts of the image or add contextual information before the photo is uploaded.

Maximum number of files allowed

Enable this option for your users to limit the number of uploads at a single time. The maximum files a user can upload is 10.

Image Quality

Select the type of image quality you would like your end users to upload. Low quality images have lower file sizes which might make it easier for users who have low connectivity to the internet to upload.

Image Text (Watermarks)

This option can be used to automatically put watermark text on all the image uploads. Useful for geolocation-tagging, timestamp-tagging of uploaded photos. Any other text like Customer Name, Site Name etc can also be put on the photos.

This field works exactly like any other field that supports formulae. Just type @ to see a list of all the fields defined in the app that can be put on the images.

Examples

Put Geolocation, date of visit and site name on the photos: Ensure that these fields are defined in the app.

‍

Image Text Position (Visible after setting image text)

Once an image text is added, an additional setting called Image Text Position appears.

Admins can choose which corner the text will be placed on uploaded images: Top Left, Top Right, Bottom Left, Bottom Right.

Upload Logo

This option allows admins to upload a logo that will be overlaid on images captured or uploaded through this block. The logo file can be uploaded by dragging and dropping it into the designated area.

Logo Position (Visible after uploading a logo)

Once a logo is uploaded, an additional setting called Logo Position appears.

Admins can choose which corner the logo will be placed on uploaded images: Top Left, Top Right, Bottom Left, Bottom Right.

Let’s say for the same uploaded image as above, a logo is also uploaded to appear at the top right corner. Once the image is uploaded by the user in App Home, the logo will appear as configured.

‍
File name prefix

Allow uploaded files to have dynamic names. For the images uploaded via Camera, Admins can choose a custom dynamic prefix. The prefix can take values from other fields in the App. This will help the Admins to segregate the files based on the prefix values.

Even in this field, you can type ‘@’ to get a list of all the variables in the app and select variables.

Note: Ensure that if values are to be taken from another field, that field would need to be filled in first and then take the image from the device's camera.

‍

‍

Display this field if

Use this if you want to show or hide a field under certain conditions. It accepts the standard Clappia Formulae, similar to conditional sections.

1. You can type ‘@’ to get a list of all the variables in the app and select variables.
2. Using these variables you can write Excel-like formulae.

‍

Retain value if hidden

This option appears once a condition is set in the Display this field if option. Enable this setting if you want the field's value to be retained even when the field is hidden. This is useful for preserving user input in cases where the field may temporarily disappear based on conditions.

Example: If the field is hidden based on user selection but you still need to keep the entered value for future reference or calculations, enable this option to ensure the data is retained.

Allow value to be changed after initial submission

This option is enabled by default. End users can edit the value entered in this field after creating a submission. Disable it if you do not want the end users to edit the submitted value.

‍

Generating Public URLs for Uploaded Images & Videos

When a user uploads an image or video using the Camera, Images & Files block, Clappia generates a Public URL for the uploaded file. This URL allows the file to be accessed directly through a web browser.

How to Retrieve the Public URL?

To store and view the public URL of uploaded files within your app:

1. Add a Text Block

In your Clappia app (this can be any app), add either a Single Line Text or Multi-line Text block. This block will be used to store the public URL of the uploaded file.

2. Configure the Edit Submission Workflow

Go to the Workflows tab of the app containing the ‘Camera, Image & Files’ block.

Add an Edit Submission workflow node.

In the configuration panel of the node:

• Select the app where the Single line or Multi-line text block is used, to capture the public url.
• Set the filter to match the correct submission.
• Under Set Field Values, select the text block created in Step 1.

Insert the Public URL Variable

• In the Set Field Values option, type @ and look for a default variable named:
  camera_block_name#publicurl (replace camera_block_name with the actual name of your Camera block), or just type @url and you should find it.
• Select this variable. 

Now, every time a submission is made, the public URL of the uploaded file will be stored in the selected text block.

Keep URLs Public Forever Option

Once the public URL variable is added in the Edit Submission workflow node, an additional option appears called ‘Keep URLs Public Forever’.

Enabling this option ensures that the public URL remains accessible indefinitely.

Where to Find These Public URLs?

• After submission, you can find the public URL in the Submissions tab. The stored URL is clickable from the table, allowing quick access to the uploaded file.
• If you download submission data, the URLs will be included in the exported file.

Notes

• The Image Text field is a formula field, so it will accept only valid formulae supported by Clappia. For example, if we need to put field_one and field_two on the image, we can't write field_one field_two as this is not a valid formula. The correct value would be field_one & " " & field_two.
• This feature now works on the web as well as on Android and iOS apps (minimum Clappia app version 2.3.5).
• If the Image Text is dependent on a field whose value is not yet filled by the user, then that field will be replaced by an empty string in the Watermark. To avoid such scenarios, the image upload fields can be configured to show only when all dependent fields are filled. Conditional Sections can be used to achieve this.
• It might not be possible to use Date and time fields directly in the image text. Date and time fields need to be converted to text values before they can be used. Refer to this for the usage of TEXT formula.