bug(ui): native "Choose File" input in edit form is inconsistent with design system #102

New Issue

marcel · 2026-03-27T12:21:54+01:00

marcel commented

2026-03-27 12:21:54 +01:00

Severity: Low — visual inconsistency

On the document Edit page, the file replacement section shows the current filename and a native browser "Choose File" button. The native button renders in the OS default style (gray, system font, varying appearance per browser/OS) — completely inconsistent with the rest of the form's design language.

The new document form already has a custom drop zone with a styled upload area. The edit form should use the same component.

Fix

Replace the native <input type="file"> button in the edit form with the same custom upload zone component already used on the new document page. It should show the current filename prominently (e.g. "Current file: minimal.pdf") and a styled "Replace file" affordance below it, using the dashed drop zone or a simple outlined button:

┌─────────────────────────────────┐
│  📄  Current file: minimal.pdf  │
│                                 │
│  ↑ Upload replacement file      │
│  (optional)                     │
└─────────────────────────────────┘

This is a visual-only fix — the form submission logic stays the same.

## Severity: Low — visual inconsistency On the document Edit page, the file replacement section shows the current filename and a native browser "Choose File" button. The native button renders in the OS default style (gray, system font, varying appearance per browser/OS) — completely inconsistent with the rest of the form's design language. The new document form already has a custom drop zone with a styled upload area. The edit form should use the same component. --- ## Fix Replace the native `<input type="file">` button in the edit form with the same custom upload zone component already used on the new document page. It should show the current filename prominently (e.g. "Current file: minimal.pdf") and a styled "Replace file" affordance below it, using the dashed drop zone or a simple outlined button: ``` ┌─────────────────────────────────┐ │ 📄 Current file: minimal.pdf │ │ │ │ ↑ Upload replacement file │ │ (optional) │ └─────────────────────────────────┘ ``` This is a visual-only fix — the form submission logic stays the same.

marcel added the ui label 2026-03-27 12:28:19 +01:00

marcel referenced this issue from a commit

2026-03-27 16:42:25 +01:00

fix(#102): replace native file input in edit form with styled upload zone

marcel closed this issue

2026-03-27 16:44:08 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#102