fix(admin): repair media upload redirect
This commit is contained in:
Schubert Ferenc
parent
c35bd5877e
commit
203c94b128
12 changed files with 248 additions and 51 deletions
|
|
@ -1,20 +1,26 @@
|
|||
import { mkdir, readdir } from "fs/promises";
|
||||
import path from "path";
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
import AdminShell from "@/components/admin/AdminShell";
|
||||
import { requireAdminSession } from "@/lib/admin/auth";
|
||||
import { listMediaFiles } from "@/lib/admin/media";
|
||||
|
||||
const uploadDir = path.join(process.cwd(), "public", "uploads", "images");
|
||||
|
||||
async function getFiles() {
|
||||
await mkdir(uploadDir, { recursive: true });
|
||||
return readdir(uploadDir);
|
||||
function formatBytes(size: number) {
|
||||
if (size < 1024) return `${size} B`;
|
||||
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
||||
return `${(size / 1024 / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
export default async function AdminMediaPage() {
|
||||
function uploadErrorMessage(error?: string) {
|
||||
if (!error) return "";
|
||||
if (error === "missing-file") return "Bitte wählen Sie eine Datei aus.";
|
||||
if (error === "storage") return "Die Datei konnte nicht gespeichert werden. Bitte Upload-Speicher und Rechte prüfen.";
|
||||
return error;
|
||||
}
|
||||
|
||||
export default async function AdminMediaPage({ searchParams }: { searchParams: Promise<{ uploaded?: string; error?: string }> }) {
|
||||
if (!await requireAdminSession()) redirect("/admin/login");
|
||||
const files = await getFiles();
|
||||
const [files, params] = await Promise.all([listMediaFiles(), searchParams]);
|
||||
const error = uploadErrorMessage(params.error);
|
||||
|
||||
return (
|
||||
<AdminShell>
|
||||
|
|
@ -22,25 +28,40 @@ export default async function AdminMediaPage() {
|
|||
<p className="eyebrow">Assets</p>
|
||||
<h1>Medienverwaltung</h1>
|
||||
</div>
|
||||
{params.uploaded === "1" && <p className="success">Datei wurde erfolgreich hochgeladen.</p>}
|
||||
{error && <p className="error admin-message">Upload fehlgeschlagen: {error}</p>}
|
||||
<form className="admin-card admin-upload" action="/api/admin/media" method="post" encType="multipart/form-data">
|
||||
<label>Datei hochladen<input name="file" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" /></label>
|
||||
<button className="button" type="submit">Datei hochladen</button>
|
||||
</form>
|
||||
<section className="admin-card">
|
||||
<h2>Uploads</h2>
|
||||
<div className="media-grid">
|
||||
{files.map((file) => {
|
||||
const url = `/uploads/images/${file}`;
|
||||
return (
|
||||
<a key={file} className="media-item" href={url} target="_blank" rel="noreferrer">
|
||||
{/\.(png|jpe?g|webp)$/i.test(file)
|
||||
? <Image src={url} alt={file} width={320} height={220} />
|
||||
: <span>{file}</span>}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
{files.length === 0 && <p className="admin-muted">Noch keine Uploads vorhanden.</p>}
|
||||
</div>
|
||||
{files.length === 0 ? (
|
||||
<div className="media-empty">
|
||||
<h3>Noch keine Medien vorhanden</h3>
|
||||
<p>Hochgeladene Bilder und PDF-Dateien erscheinen hier mit Vorschau und Metadaten.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="media-list">
|
||||
{files.map((file) => (
|
||||
<article key={file.name} className="media-row">
|
||||
<a className="media-preview" href={file.url} target="_blank" rel="noreferrer">
|
||||
{file.isImage
|
||||
? <Image src={file.url} alt={file.name} width={220} height={140} />
|
||||
: <span>{file.type}</span>}
|
||||
</a>
|
||||
<div>
|
||||
<h3>{file.name}</h3>
|
||||
<dl className="media-meta">
|
||||
<div><dt>Typ</dt><dd>{file.type}</dd></div>
|
||||
<div><dt>Größe</dt><dd>{formatBytes(file.size)}</dd></div>
|
||||
<div><dt>Upload</dt><dd>{new Date(file.uploadedAt).toLocaleString("de-DE")}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</AdminShell>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,38 +1,34 @@
|
|||
import { mkdir, readdir, writeFile } from "fs/promises";
|
||||
import path from "path";
|
||||
import { NextResponse } from "next/server";
|
||||
import { requireAdminSession } from "@/lib/admin/auth";
|
||||
import { listMediaFiles, saveMediaFile } from "@/lib/admin/media";
|
||||
|
||||
const uploadDir = path.join(process.cwd(), "public", "uploads", "images");
|
||||
const allowedTypes = new Set(["image/jpeg", "image/png", "image/webp", "application/pdf"]);
|
||||
|
||||
async function ensureUploadDir() {
|
||||
await mkdir(uploadDir, { recursive: true });
|
||||
function relativeRedirect(target: string) {
|
||||
return new NextResponse(null, {
|
||||
status: 303,
|
||||
headers: { Location: target },
|
||||
});
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
|
||||
await ensureUploadDir();
|
||||
const files = await readdir(uploadDir);
|
||||
return NextResponse.json({
|
||||
files: files.map((file) => ({ name: file, url: `/uploads/images/${file}` })),
|
||||
});
|
||||
return NextResponse.json({ files: await listMediaFiles() });
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
|
||||
await ensureUploadDir();
|
||||
const form = await request.formData();
|
||||
const file = form.get("file");
|
||||
|
||||
if (!(file instanceof File) || !allowedTypes.has(file.type) || file.size > 5 * 1024 * 1024) {
|
||||
return NextResponse.json({ message: "Bitte eine JPG-, PNG-, WebP- oder PDF-Datei bis 5 MB hochladen." }, { status: 400 });
|
||||
if (!(file instanceof File)) {
|
||||
return relativeRedirect("/admin/medien?error=missing-file");
|
||||
}
|
||||
|
||||
const extension = path.extname(file.name).toLowerCase();
|
||||
const safeName = `${Date.now()}-${file.name.toLowerCase().replace(/[^a-z0-9.-]/g, "-")}`;
|
||||
const target = safeName.endsWith(extension) ? safeName : `${safeName}${extension}`;
|
||||
await writeFile(path.join(uploadDir, target), Buffer.from(await file.arrayBuffer()));
|
||||
try {
|
||||
const result = await saveMediaFile(file);
|
||||
if (result.error) return relativeRedirect(`/admin/medien?error=${encodeURIComponent(result.error)}`);
|
||||
} catch {
|
||||
return relativeRedirect("/admin/medien?error=storage");
|
||||
}
|
||||
|
||||
return NextResponse.redirect(new URL("/admin/medien?uploaded=1", request.url));
|
||||
return relativeRedirect("/admin/medien?uploaded=1");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@ import { saveSiteSettings } from "@/lib/admin/store";
|
|||
export async function POST(request: Request) {
|
||||
if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
|
||||
await saveSiteSettings(await request.formData());
|
||||
return NextResponse.redirect(new URL("/admin/einstellungen?saved=1", request.url));
|
||||
return new NextResponse(null, { status: 303, headers: { Location: "/admin/einstellungen?saved=1" } });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@ import { saveSmtpSettings } from "@/lib/admin/store";
|
|||
export async function POST(request: Request) {
|
||||
if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
|
||||
await saveSmtpSettings(await request.formData());
|
||||
return NextResponse.redirect(new URL("/admin/smtp?saved=1", request.url));
|
||||
return new NextResponse(null, { status: 303, headers: { Location: "/admin/smtp?saved=1" } });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -750,6 +750,10 @@ h3 {
|
|||
gap: 14px;
|
||||
}
|
||||
|
||||
.admin-message {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
|
@ -772,6 +776,69 @@ h3 {
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
.media-empty {
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.media-empty p {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.media-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.media-row {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.media-preview {
|
||||
display: grid;
|
||||
min-height: 110px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
color: var(--navy);
|
||||
font-weight: 800;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-preview img {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.media-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-meta dt {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.media-meta dd {
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.system-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
|
|
@ -896,6 +963,11 @@ h3 {
|
|||
display: grid;
|
||||
}
|
||||
|
||||
.media-row,
|
||||
.media-meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.system-list div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import type { Metadata } from "next";
|
|||
|
||||
const siteName = "Funktechnik Schubert";
|
||||
const defaultTitle = "Funktechnik Schubert | Funkgeräte-Service & Messtechnik";
|
||||
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3010";
|
||||
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://127.0.0.1:3010";
|
||||
const keywords = [
|
||||
"Funktechnik Schubert",
|
||||
"Funkgeräte Reparatur",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue