FileInput

The FileInput component provides a traditional input field for selecting and managing files. Unlike FileButton and Dropzone, this component integrates the file selector directly into the form field, with support for validation, clear/download buttons, and layout customization.

1. Basic Properties

• Name: The unique identifier of the component (e.g., FileInput1).
• Label: The text displayed above the input (e.g., File input).
• Edit select button: Customize the label of the select button.
• Accept: Restrict file types (e.g., image/*, .pdf).
• Placeholder: A hint message displayed when no file is selected.

States

• Disabled: Prevents file selection.
• Hidden: Hides the input while keeping it in logic.
• Multiple: Allows selecting multiple files.

2. Layout

Defines responsiveness and spacing of the component.

📘 See Common Properties → Layout.

3. Events

• onChange → Triggered when a file is selected, changed, or removed.

4. Validations

Ensures uploaded files meet specific requirements:

• Max file size → Maximum file size allowed (bytes).
• Min file size → Minimum file size allowed (bytes).
• Invalid max file size message → Error shown when the file is too large.
• Invalid min file size message → Error shown when the file is too small.

📘 See Common Properties → Validations.

5. Buttons

• Show clear button → Adds a button to remove the selected file(s).
  • Clear button text → Customize label (default: Clear).
• Show download button → Adds a button to download the selected file.
  • Download button text → Customize label (default: Download).
• Select button location → Choose position of the select button (start or end).

6. Style

Custom styles can be applied for further UI adjustments.

📘 See Common Properties → Style.

✅ The FileInput component is ideal when you want a form-style file selector with built-in clear/download options, making it more flexible for managing uploaded files compared to FileButton or Dropzone.