InputFile-Styling

[laske185]

Die Gestaltbarkeit des InputFile soll verbessert werden.

Todos:

• [ ] input vom typ file und eigene Komponente nebeneinander in das kol-input legen
  • welches verwendet werden soll kann per im CSS des Themes entsprechend sichtbar geschaltet werden
• [ ] Ausgewählte Datei anzeigen
• [ ] Drag and Drop Support:
  • Anzeigen, wenn Datei über Input (drag-over)
  • Drop auf äußeres Label wählt Datei aus

So könnte es aussehen: https://bootstrap-vue.org/docs/components/form-file/

[chriskrj]

Ich habe unten einmal das Design Template für unsere Input File Komponente angefügt.

Sowohl Multi Upload als auch Single File Upload.

Dropzone habt ihr ja schon thematisiert. Was das ganze spannend macht, ist die Liste mit hochgeladenen Files und deren Upload Prozess. Hier sollte dann die kol-progress zum Einsatz kommen und die kol-badge für den Upload Status.

Ob das komplett auf Kolibriseite so implementiert werden muss, kann ich nicht beantworten, aber wenn nicht, gib uns gerne nochmal ein Hinweis, wie wir dann die kol-input-file um die nötigen Anpassungen erweitern könnten.

Neue Properties:

/**
* Defines the maximum file size in bytes.
*/
@Prop() public _maxFileSize?: maxFileSize;

/**
* Defines which file formats are accepted.
*/
@Prop() public _allowedFileTypes?: AllowedFileTypes[];

Komponenten Design:

[laske185]

Die Property für allowedFileTypes gibt es bereits. Es ist die _accept-Property (https://public-ui.github.io/docs/components/input-file#properties).

MaxFileSize sollte bei der Validierung innerhalb der Fachanwendung geprüft werden und nicht innerhalb der Komponente. Die Komponente kann das Folgeverhalten nicht entscheiden.