Understand image field

Understand image field

The image field enables your users to submit an image through your form. They can either take a photo or upload one. Below is how an image field looks on a form:

  • When a user accesses from a web browser:

  • When a user accesses from a phone or tablet:

Size limits

  • When a user accesses from a web browser and uploads an image from the device's local storage, the image field can accept an image of size up to 10 MB
  • When a user accesses from a phone or tablet, the image that the user takes or selects (from the device's photo gallery), will automatically be compressed to fit this limit

The images that your users submit through your form are stored in your account and are counted towards your account’s total storage limit. Refer your Account Setup > Data Administration > Usage Details to view your current storage details.

On accessing from a web browser

When your users access your form from a web browser, they can submit an image in either of the following ways. This depends on the choices selected in the Browse Options field property.

Upload an image from their device's local storage

  1. Click the Upload icon in the image field. This will launch the device's file explorer.
  2. Select the required image
  3. Alternatively, you can drag and drop the required image onto the field

Upload an image that's stored in the cloud, by entering its link

  1. Click the URL icon in the image field
  2. Enter the required image's URL
  3. If the Title and Url options have been enabled for that field image field, enter a Link Name and Title for the URL you entered

Take a photo using the device's camera

  1. Click the Camera icon in the image field.
  2. If it is the first time your user is accessing the image or video field, they will be prompted to grant permission to use the device's camera:
    • They can either Allow or Block
    • If they select Block, they will be prompted with the message Allow access to media. They won't be able to take a photo till they Allow access to the camera.
  3. Click Allow. This will launch the image recorder in a pop-up window.
  4. Click the Camera icon at the bottom of the pop-up, to take a photo.
  5. Click Done to use the photo, or click Retake to retake the photo and then click Done.
  6. The photo you took will appear in the image field.

On accessing from a phone or tablet

When your users access your form from a phone or tablet and tap on the image field, they can add an image in two ways:

  • Take a photo
  • Choose a photo from their device's photo gallery. This option becomes available when you Enable photo gallery field property.

Take a photo

  1. Tap on the image field. This will launch the device's primary or secondary camera, depending on what value the Default Camera field property is set with.
  2. If the Enable photo gallery field property is enabled, tap Take Photo. This will launch the device's camera.
  3. If the Allow to Switch Camera field property is enabled, you will be able to switch between the device's cameras.
  4. Take a photo by tapping the Shutter button. You will get to preview the image you took.
  5. Tap Use Photo at the bottom-right corner of the screen, or tap Retake at the bottom-left corner to retake the image.
  6. If the Annotation (for mobile) field property is enabled, you will get to add annotations to the image.
  7. Click Done at the top-right corner of the screen. The photo you took will appear in the image field.

Choose a photo from device's photo gallery

  1. Tap on the image field, then tap Choose Photo. This will launch the device's photo gallery.
  2. Select the required image.
  3. If the Annotation (for mobile) field property is enabled, you will get to add annotations to the image.
  4. Tap Done at the top-right corner of the screen. The photo you selected will appear in the image field.

Features

You can perform the following customizations for the user experience of the image field on your form:

  • Mobile-specific customizations:
    • Enable Annotation: You can enable your user to add annotations to the image they capture or select. Annotation options include adding text, lines, arrows, and shapes.
    • Get input before form is displayed: You can make your user capture an image, or select one from their device's gallery, even before they access your form
    • Set Default Camera: You can define the camera, primary or secondary, that will be launched when your users access this field from a phone or tablet
    • Allow to Switch Camera: You can either allow your user to switch between the primary and secondary cameras, or indirectly force them to use the Default Camera set for that image field
    • Enable timer: You can display a timer of 3 seconds before the photo is taken. This timer will start counting down after your user taps the Shutter button (to take a photo).
    • Enable photo gallery: You can allow your users to select an image from their device's photo gallery (in addition to taking a photo)
    • Show Preview Screen: You can enable your users to preview the photo they take, and define how they will exit this preview – exit when the user taps on the screen, or exit automtically in (3, 5, 10, 15 seconds)
    • Submit form after capturing: You can enable form submission immediately after the user adds an image
    • Set the Aspect Ratio: The photo your user takes or selects, will be resized as per the value set for this field property
  • Set the browse options: This defines the sources from where your users will be able to select the image when they access the image field
    • Local Storage: Your users will be able to upload an image present in their device's local storage (photo gallery in case of mobile devices)
    • Link: Your users will be able to enter the URL of an image stored in the cloud
    • Camera: Your users will be able to take a photo using their device's camera
  • Customize the field name and field link name of this field
  • Make it mandatory for your users to add an image in this field
  • Show this field only to the app’s admin (and hide it from other users)
  • Set field size
  • Enable displaying a tooltip message when your users hover their mouse over this field

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohocreator.com