`filefield`

Diese Komponente stellt ein Feld zum Upload einer Datei dar.

Konfiguration

Für allgemeine Konfigurations-Optionen siehe Allgemeine Komponenten Konfiguration.

Spezifische Konfiguration

type ("filefield"): Typ der Komponente.
value (Binding | string): Inhalt der Datei in Base64-encodiertem String.

Allgemeine Konfiguration

Neben den für alle gültigen Konfigurationen, können optional folgende Konfigurationen gesetzt werden: disabled, errorTarget, icon, label, label Einstellungen, onChange, required.

Individuelles Styling

Das visuelle Design der Uploadfelder wird primär über die globalen Variablen gesteuert. Für spezifische Abweichungen kann gezielt CSS eingesetzt werden.

Über das Attribut cls können eigene CSS-Regeln angewendet werden. Die Komponente bietet dafür folgende Standard-Angriffspunkte:

.filefield: Styles für den Container des Uploadfelds.
.filefield-label / .filefield .label: Direkter Zugriff auf das Label des Uploadfelds.
.filefield .value: Zugriff auf das Eingabeelement des Uploadfelds.

Beispiel

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": {}
  }
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: