This element allows users to upload files directly through the form. It can be used for collecting documents, images, videos, or any other supported file types.

 Key Options and How They Work:

  1. Choose a File / Placeholder text

    • This is the text displayed in the field before the user selects a file.

    • It guides the user on what is expected (e.g., “Choose a file”).

  2. Allow multiple upload

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

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

  3. Allow File Type

    • Specifies which file types the user can upload.

    • Example: .png, .mov, .mp4, .jpg

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

  4. No. of maximum image upload

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

    • Example: maximum 7 files.

  5. Additional message

    • Text displayed below the upload field, which can be instructions or notes for the user (e.g., “You can upload up to 7 images”).

  6. Drag and Drop

    • Allows the user to drag and drop files into the field instead of using the classic “Choose file” button.

    • Improves UX, especially for uploading multiple files at once.

  7. Sub label / Browse button text

    • Sub label: additional text below the field (e.g., “Supported formats: jpg, png, mp4”).

    • Browse button text: text on the file selection button (e.g., “Browse Files”).

  8. Field Layout Settings

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

    • Required – the user must upload a file to submit the form.

    • Custom class / Custom ID – for advanced styling or JS functionality.


How the Element Works in Practice:

  1. The user sees a field with the text “Choose a File” and optional additional messages.

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

  3. The system checks if the files match the allowed types and maximum file limit.

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

  5. Once the form is submitted, all valid files are uploaded to the server and available for further processing.


See element in action: https://www.youtube.com/watch?v=aexc1BaMPqg