lux‐file‐upload v16

LUX-File-Upload

• LUX-File-Upload
  • Overview / API
    • Allgemein
    • @Input
    • @Output
  • Classes / Interfaces
    • ILuxFileObject
    • ILuxFileError
    • LuxFileErrorCause
    • ILuxFilesActionConfig
  • Beispiele
    • 1. Simple
    • 2. Mit Formular
    • 3. Mit Dateieinschränkungen

Overview / API

Allgemein

Name	Beschreibung
import	LuxFormModule
selector	lux-file-upload

@Input

Name	Typ	Beschreibung
luxLabel	string	Enthält das Label vor dem Link (siehe luxLabelLink).
luxLabelLink	string	Enthält das Label für den Link.
luxLabelLinkShort	string	Enthält das Label für den Link in der mobilen Ansicht.
luxHint	string	Enthält den Hinweistext unterhalb der FormComponent.
luxUploadIcon	string	Enthält den Namen für das Upload-Icon.
luxDeleteIcon	string	Enthält den Namen für das Delete-Icon.
luxMultiple	boolean	Bestimmt, ob mehrere Dateien für diese Component geladen werden können.
luxMaxSizeMB	number	Definiert die maximale Dateigröße, die jede Datei haben darf.
luxCapture	string	Bestimmt für Mobilgeräte, ob die Front bzw. Rückkamera verwendet werden. Mögliche Werte: ''/undefined; user (Frontkamera), environment (Rückkamera)
luxSelected	LuxFileObject[] | null	Property, die die aktuell bekannten LuxFileObjects beinhaltet. Durch den Event-Emitter "luxSelectedChange" ist ein Two-Way-Binding möglich.
luxAccept	string	Über diese Property ist es möglich nur bestimmte Dateitypen zu erlauben (z.B. '.pdf' oder 'image/*').
luxContentsAsBlob	boolean	Schaltet die Dateibehandlung so um, dass sie anstelle von Base64-Strings mit Blobs für die Dateien umgeht. Anmerkung: Bei Base64 den Präfix nicht vergessen: data:[<MIME-Typ>][;charset=<Zeichensatz>][;base64],<Daten> Z.B. data:image/png;base64,iVBORw0KGgoAAAA...
luxRequired	boolean	Bestimmt ob die Component ein Pflichtfeld ist oder nicht.
luxControlBinding	string	Das Controlbinding (z.B. Vorname) verbindet das Formularelement mit einem Wert aus dem Modell. (!) Diese Eigenschaft kann nur verwendet werden, wenn das Element innerhalb eines Formulars verwendet wird.
luxErrorMessage	string	Fehlertext, wenn das Formularelement nicht valide ist. Der Fehlertext ersetzt den Hinweistext, wenn es einen gibt. Ersetzt den luxErrorCallback, wenn gesetzt.
luxDisabled	boolean	Bestimmt ob die Component deaktiviert ist oder nicht. Durch den Event-Emitter "luxDisabledChange" ist ein Two-Way-Binding möglich.
luxReadonly	boolean	Bestimmt ob sich das Feld im reinen Lese-Zustand befindet (ähnlich wie disabled, aber ohne die Auswirkungen auf Forms und andere visuelle Darstellung).
luxErrorCallback	LuxErrorCallbackFnType	Callback-Funktion die aufgerufen wird nachdem die Validierung der Component stattgefunden hat. Hier kann dann entsprechend aus dem übergebenen Errors-Objekt ein Fehler ausgelesen und die passende Fehlermeldung zurückgegeben werden. Liefert der Callback undefined zurück, wird die Defaultfehlermeldung ausgegeben.
luxControlValidators	ValidatorFnType	Validator-Funktion oder ein Array von Validator-Funktionen, die für diese Component hereingereicht werden können. Diese werden nur für nicht-ReactiveForms-Components angewendet und sollen so eine Validierung für "normale" Komponenten ermöglichen.
luxTagId	string	LUX-Tag-Id für die automatischen Tests.

@Output

Name	Typ	Beschreibung
luxSelectedChange	EventEmitter <LuxFileObject[] | null>	Output-Event das bei Änderungen am luxSelected-Feld ausgestoßen wird. Ermöglicht das Two-Way-Binding an luxSelected.

Classes / Interfaces

ILuxFileObject

Dieses Interface stellt eine Datei dar und wird von den LuxFileComponents entgegen genommen und weiter gereicht. Sie enthält den Namen der Datei sowie den Base64-Stringwert bzw. den Blob-Content sowie eine Callback-Funktion, welche diesen wiedergibt.

Name	Typ	Beschreibung
name	string	Enthält den Namen der Datei.
type	string	Enthält den Dateityp.
size	number	Enthält die Dateigröße (Bytes).
content	string | Blob	Enthält den Base64-Inhalt bzw. den Blob-Wert der Datei.
contentCallback	Promise<any> | Observable<any> | any	Enthält eine Funktion, welche den Base64-Inhalt/Blob-Wert der Datei wiedergibt. Diese Funktion wird von der View-Action (Standardmäßig der Button mit dem "eye"-Icon aufgerufen, um den Base64 Inhalt nachzuladen. Bei großen Dateien nützlich, um nicht direkt alle Inhalte auf einmal zu laden.
namePrefix	string	Enthält den Präfix
namePrefixColor	string	Enthält die Farbe des Präfixes
nameSuffix	string	Enthält den Suffix
nameSuffixColor	string	Enthält die Frabe des Suffixes

ILuxFileError

Dieses Interface wird von den Objekten genutzt, welche bei Fehlern während der Ausführung der Component (z.B. dem Upload oder der Dateiauswahl) entstehen.

Name	Typ	Beschreibung
cause	LuxFileErrorCause	Enum-Wert mit der Ursache des Fehlers.
exception	any	Enthält den eigentlichen Fehler, dies kann ein Fehlerobjekt oder aber auch Fehler-Nachrichten.
file	File	Enthält die Datei, bei der der Fehler aufgetreten ist.

LuxFileErrorCause

Enum mit möglichen Fehlerquellen.

Name	Beschreibung
MaxSizeError	Fehler, der bei überschrittener Dateigröße auftritt.
ReadingFileError	Fehler, der beim Auslesen des Base64-Inhalts einer Datei auftritt.
UploadFileError	Fehler, der beim Hochladen einer/mehrerer Dateien auftritt.
FileNotAccepted	Fehler, wenn die Datei nicht den korrekten Dateityp hat (eingeschränkt durch luxAccept).
MultipleForbidden	Fehler, der beim übergeben von mehreren Dateien auftritt, obwohl nur eine erlaubt ist.

ILuxFilesActionConfig

Dieses Interface enthält die möglichen Einstellungen für die Action-Buttons der LuxFileComponents.

Name	Typ	Beschreibung
hidden	boolean	Bestimmt, ob diese Aktion für die aktuelle LuxFileComponent angezeigt werden soll oder nicht.
disabled	boolean	Bestimmt, ob diese Aktion für die aktuelle LuxFileComponent deaktiviert ist oder nicht.
iconName	string	Definiert das Icon für diese Aktion.
prio	number	Über die Priorität kann die Anzeigereihenfolge beeinflusst werden.
label	string	Die Bezeichnung
onClick?	(file: ILuxFileObject[]) => void	Optionaler Callback, welcher bei der Durchführung der Aktion aufgerufen wird.

Beispiele

1. Simple

Ts

export class FileUploadExampleComponent {
  selectedFiles: ILuxFileObject[] | null = [];
}

Html

<lux-file-upload [(luxSelected)]="selectedFiles"></lux-file-upload>

2. Mit Formular

Ts

export class FileUploadExampleComponent implements OnInit {
  form: FormGroup;

  constructor(private filePreviewService: LuxFilePreviewService) {
    this.form = new FormGroup({
      files: new FormControl<ILuxFileObject[] | null>(null),
    });
  }
}

Html

<div [formGroup]="form">
  <lux-file-upload luxControlBinding="files"></lux-file-upload>
</div>

3. Mit Dateieinschränkungen

Ts

export class FileUploadExampleComponent implements OnInit {
  acceptedTypes = ".pdf,.png";
  hint =
    "Es werden nur folgende Dateitypen unterstützt: " +
    LuxUtil.getAcceptTypesAsMessagePart(this.acceptedTypes);

  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      files: new FormControl<ILuxFileObject[] | null>(
        null,
        Validators.required,
      ),
    });
  }
}

Html

<div [formGroup]="form">
  <lux-file-upload
    luxControlBinding="files"
    [luxAccept]="acceptedTypes"
    [luxContentsAsBlob]="true"
    [luxHint]="hint"
  ></lux-file-upload>
</div>