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:
1 parent
6a815e85fe
commit
c7286041a1
6 files changed
+33
-3
No files matched your search
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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.",
|
||||
|
||||
@@ -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.",
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user