filefield

This component represents a field for uploading a file.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("filefield")

Component type.

value (Binding | string)

File content as a Base64-encoded string.

General Configuration

In addition to the configurations that apply to all fields, the following configurations can optionally be set: //boxLabel settings, disabled, errorTarget, icon, label, label settings, onChange, //readOnly, required.

Custom Styling

The visual design of the upload fields is primarily controlled via global variables. CSS can be used specifically for certain deviations.

Using the attribute cls , you can apply your own CSS rules. The component provides the following standard styling targets for this purpose:

.filefield

Styles for the upload field container.

.filefield-label / .filefield .label

Direct access to the upload field Label.

.filefield .value

Access to the upload field’s input element.

Example

filefield.json
{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "components": [
    {
      "type": "container",
      "label": "Filefield Component Example",
      "components": [
        {
          "label": "Upload your file here",
          "type": "filefield",
          "value": "${/data/fileBase64}"
        },
        {
          "label": "Submit",
          "type": "button",
          "action": "submit"
        }
      ]
    }
  ],
  "configuration": {
    "submitUrl": "http://localhost:3000/foo"
  },
  "state": {
    "data": {}
  }
}
Embedded preview

Keywords: