FileButton

The FileButton component allows users to upload files by clicking a button instead of using drag-and-drop. It supports validation (type, size), icons, styling, and tooltips for enhanced usability.

1. Basic Properties

• Name: The unique identifier of the component (e.g., FileButton1).
• Select button text: Label displayed on the button (e.g., Select File).
• Accept: Restricts file types (e.g., image/*, .pdf).
• Disabled: Makes the button inactive.
• Hidden: Hides the component while keeping it in logic.
• Multiple: Allows selection of multiple files.

2. Layout

Controls responsive grid placement and spacing.

📘 See Common Properties → Layout.

3. Events

• onChange → Triggered when a file is selected.

4. Validations

Ensures selected files meet defined rules:

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

📘 See Common Properties → Validations.

5. Icons

• Start icon → Icon shown at the beginning of the button.
• End icon → Icon shown at the end of the button.

6. Appearance

• Color → primary, secondary (theme colors).
• Variant → Button style: contained, outlined, or text.
• Size → small, medium, large.
• Full width → Expands button to fill container.
• Disable elevation → Removes button shadow.
• Disable ripple → Removes ripple effect.
• Disable focus ripple → Disables ripple effect on focus.
• Loading → Shows loading state while processing.

7. Tooltip

Adds contextual help when hovering over the button.

• Title → Tooltip text.
• Placement → Tooltip position (top, bottom, left, right).

📘 See Common Properties → Tooltip.

8. Style

Custom styles can be applied for further UI adjustments.

📘 See Common Properties → Style.

✅ The FileButton component is best suited when a button-based upload fits better than drag-and-drop. It provides validation, theming, icons, and tooltips to create a user-friendly upload experience.