fix: echten Button statt rohem Datei-Input bei allen Admin-Uploads

Bild-/Video-Upload-Felder (admin/inhalte, admin/produkte, admin/ernten)
zeigten den unstyled Browser-Standard-Datei-Input — kaum als
Bedienelement erkennbar. Input jetzt versteckt, stattdessen ein
richtiger, zum Admin-Design passender Button, der den Datei-Dialog
oeffnet.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Sonnet 5 committed 2026-09-11 23:30:32 +02:00
1 parent 6a815e85fe
commit c7286041a1
6 files changed
+33 -3

No files matched your search

+9 -1
View File
@@ -70,8 +70,16 @@ export function AdminImageField({ name, label, initialValue }: AdminImageFieldPr
accept="image/jpeg,image/png,image/webp,image/avif"
onChange={handleFileChange}
disabled={status === "uploading"}
className="block text-xs"
className="hidden"
/>
<button
type="button"
onClick={() => inputRef.current?.click()}
disabled={status === "uploading"}
className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-forest disabled:opacity-50"
>
{t.adminImageField.chooseFile}
</button>
{status === "uploading" ? (
<p className="mt-1 text-xs text-ink/70">{t.adminImageField.uploading}</p>
) : null}
+9 -1
View File
@@ -88,8 +88,16 @@ export function AdminImageListField({ name, label, initialValues }: AdminImageLi
accept="image/jpeg,image/png,image/webp,image/avif"
onChange={handleFileChange}
disabled={status === "uploading"}
className="block text-xs"
className="hidden"
/>
<button
type="button"
onClick={() => inputRef.current?.click()}
disabled={status === "uploading"}
className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-forest disabled:opacity-50"
>
{t.adminImageField.chooseFile}
</button>
{status === "uploading" ? (
<p className="mt-1 text-xs text-ink/70">{t.adminImageField.uploading}</p>
) : null}
+9 -1
View File
@@ -68,8 +68,16 @@ export function AdminVideoField({ name, label, initialValue }: AdminVideoFieldPr
accept="video/mp4,video/webm"
onChange={handleFileChange}
disabled={status === "uploading"}
className="block text-xs"
className="hidden"
/>
<button
type="button"
onClick={() => inputRef.current?.click()}
disabled={status === "uploading"}
className="border border-ink/20 bg-background px-3 py-2 text-xs hover:border-forest disabled:opacity-50"
>
{t.adminVideoField.chooseFile}
</button>
{status === "uploading" ? (
<p className="mt-1 text-xs text-ink/70">{t.adminVideoField.uploading}</p>
) : null}
+2
View File
@@ -1129,6 +1129,7 @@ export const de: Dictionary = {
},
adminImageField: {
none: "Kein Bild",
chooseFile: "Datei auswählen",
uploading: "Wird hochgeladen…",
remove: "Bild entfernen",
removeImageAt: (position) => `Bild ${position} entfernen`,
@@ -1136,6 +1137,7 @@ export const de: Dictionary = {
},
adminVideoField: {
none: "Kein Video",
chooseFile: "Datei auswählen",
uploading: "Wird hochgeladen…",
remove: "Video entfernen",
uploadError: "Der Upload ist fehlgeschlagen.",
+2
View File
@@ -1129,6 +1129,7 @@ export const en: Dictionary = {
},
adminImageField: {
none: "No image",
chooseFile: "Choose file",
uploading: "Uploading…",
remove: "Remove image",
removeImageAt: (position) => `Remove image ${position}`,
@@ -1136,6 +1137,7 @@ export const en: Dictionary = {
},
adminVideoField: {
none: "No video",
chooseFile: "Choose file",
uploading: "Uploading…",
remove: "Remove video",
uploadError: "The upload failed.",
+2
View File
@@ -830,6 +830,7 @@ export interface Dictionary {
* in admin/inhalte, admin/produkte, admin/ernten). */
adminImageField: {
none: string;
chooseFile: string;
uploading: string;
remove: string;
removeImageAt: (position: number) => string;
@@ -839,6 +840,7 @@ export interface Dictionary {
* admin/inhalte). */
adminVideoField: {
none: string;
chooseFile: string;
uploading: string;
remove: string;
uploadError: string;