This element allows users to upload images directly through the form. It can be used for collecting product photos, profile images, document scans in image format, portfolios, or other visual materials.

Key Options and How They Work:

  1. Choose an Image / Placeholder text

    • The text displayed in the field before the user selects an image.

    • Guides the user on what is expected (e.g., “Choose an image”).

  2. Allow multiple upload

    • Yes: the user can select and upload multiple images at once.

    • No: the user can select only one image per input.

  3. Allowed extensions

    • Specifies which image file types can be uploaded.

    • In this example: .jpg, .jpeg, .svg, .png

    • If the user tries to upload an unsupported file type, the system will reject it and display an error.

  4. No. of maximum image upload

    • Limits the maximum number of images a user can upload.

    • In this example, up to 10 images.

  5. Additional message

    • Text displayed below the upload field that can serve as instructions or notes (e.g., “You can upload up to 10 images”).

  6. Drag and Drop

    • Allows users to drag and drop images directly into the upload area, which makes adding multiple images easier.

  7. Sub label / Browse button text

    • Sub label: additional text below the field (e.g., “BROWSE FOR IMAGES”).

    • Browse button text: text on the button that opens the system file selection.

  8. Field Layout Settings

    • Half width / Full width – determines the width of the field within the form.

    • Required – the user must upload at least one image to submit the form.

    • Custom class / Custom ID – allows additional styling or integration with JS functionality.


 How the Element Works in Practice:

  1. The user sees a field with the text “Choose an Image” and optional additional instructions.

  2. They can click the Browse button or drag images into the drag & drop area.

  3. The system checks whether the files are valid types and within the maximum number of allowed images.

  4. Valid images are displayed within the form with options to remove or replace them before final submission.

  5. When the user submits the form, all valid images are uploaded to the server and available for further processing.


See it in action: https://www.youtube.com/watch?v=tGpiGf9uk0M