Filebox Component — fgta5js Documentation

Overview

Inheritance Notice: Class Filebox (also referenced as File Upload) inherits all of its core state tracking, validation logic, editing mode configurations, and event handlers from the abstract base class Input.

The Filebox class wraps HTML standard file inputs within the fgta5js framework. It formats selected file naming displays, supports optional download anchor nodes, and enables validation tracking for mandatory files.

Interactive Playground

Try interacting with the live component below and watch how the internal states change dynamically.

Live Preview

Component State

.value ""

.file 0

.InEditMode true

.getLastValue() ""

.isChanged() false

HTML Markup

Define standard file inputs using standard HTML. Set fgta5-component="Filebox" to enable binding.

<form id="myform" locked="true">
  <!-- Filebox Input -->
  <div class="demo-input-field" field="obj_file">
    <label for="obj_file">Attachment File</label>
    <input id="obj_file" fgta5-component="Filebox" placeholder="Upload file" required>
  </div>
</form>

Initialize and render the form in JavaScript:

const form = new $fgta5.Form('myform');
form.render()

Properties

Property	Type	Description
`value`	`String`	Get or set the active filename text description.
`file`	`File \| Number`	Gets the raw selected browser `File` instance or `0` if none selected.
`InEditMode`	`Boolean`	Gets the current edit/readonly state of the component (Read-only). To modify, use `setEditingMode()`.
`disabled`	`Boolean`	Gets or sets the component disabled state.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Creates and binds a new `Filebox` instance to the HTML element using the specified ID.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	Toggles editing mode. Setting to `false` locks the component as read-only, disabling interactive file selectors and clearing errors.
`suspend(doSuspend, keepState)`	`(doSuspend: Boolean, keepState: Boolean)`	Suspends or reactivates input interaction.
`isSuspended()`	`()`	Checks if the component is suspended.
`newData()`	`()`	Clears the selected file list and resets display properties.
`setDownloadLink(linktext, url)`	`(linktext: String, url: String \| Function)`	Enables rendering an anchor tag with a download link or custom click callback underneath the input fields. Pass `null` to hide the download link.
`getLastValue()`	`()`	Returns the last committed/saved filename string value.
`isChanged()`	`()`	Checks if the current `value` differs from the last saved state value.
`reset()`	`()`	Resets the file selector, restoring display parameters to the last saved value.

HTML Attributes

Attribute	Values	Description
`required`	N/A	Marks the component as required.
`data-tabindex`	`Number`	Sets the native tabindex on the final rendered input component.