InputFile-Styling

[laske185]

Die Gestaltbarkeit des InputFile soll verbessert werden.

Todos:

• 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.

[github-actions]

This issue has been automatically marked as stale and will be closed in 10 days because it has not had recent activity and is much likely outdated. If you think this issue is still relevant and applicable, please post a comment or remove the Stale label.

[github-actions]

This issue was closed because it has been stale for 10 days with no activity. If the issue is still relevant to you, feel free to re-open with a comment.

[deleonio]

Drag & drop? Ist das schon mit dabei?