admins/lms-sb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add file attachments to questions (new question form + admin reply)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
dmitriylaukhin
2026-05-19 18:26:17 +05:00
parent 367764b71e
commit 3b57b14d9b
3 changed files with 203 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(student)/questions/new/page.tsx
+93 -4
View File
@@ -1,15 +1,56 @@
"use client";
import { useState } from "react";
import { useState, useRef } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
interface FileAttachment {
name: string;
url: string;
size: number;
}
function formatFileSize(bytes: number) {
if (bytes < 1024) return `${bytes} Б`;
if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} КБ`;
return `${(bytes / 1024 / 1024).toFixed(1)} МБ`;
}
export default function NewQuestionPage() {
const router = useRouter();
const [title, setTitle] = useState("");
const [text, setText] = useState("");
const [files, setFiles] = useState<FileAttachment[]>([]);
const [uploading, setUploading] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const fileInputRef = useRef<HTMLInputElement>(null);
async function handleFileSelect(e: React.ChangeEvent<HTMLInputElement>) {
const selected = Array.from(e.target.files ?? []);
if (!selected.length) return;
setUploading(true);
setError("");
try {
const uploaded: FileAttachment[] = [];
for (const f of selected) {
const form = new FormData();
form.append("file", f);
const res = await fetch("/api/student/question-upload", { method: "POST", body: form });
if (!res.ok) {
const d = await res.json();
throw new Error(d.error ?? "Ошибка загрузки файла");
}
uploaded.push(await res.json());
}
setFiles((prev) => [...prev, ...uploaded]);
} catch (err) {
setError(err instanceof Error ? err.message : "Ошибка загрузки");
} finally {
setUploading(false);
if (fileInputRef.current) fileInputRef.current.value = "";
}
}
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
@@ -21,7 +62,7 @@ export default function NewQuestionPage() {
const res = await fetch("/api/questions", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title, text }),
body: JSON.stringify({ title, text, files }),
});
if (!res.ok) {
const data = await res.json();
@@ -104,6 +145,54 @@ export default function NewQuestionPage() {
/>
</div>
{/* File attachments */}
<div>
<input
ref={fileInputRef}
type="file"
multiple
accept=".jpg,.jpeg,.png,.pdf,.md,.txt"
className="hidden"
onChange={handleFileSelect}
/>
{files.length > 0 && (
<div className="flex flex-wrap gap-2 mb-3">
{files.map((f, i) => (
<div
key={f.url}
className="flex items-center gap-1.5 text-xs px-2.5 py-1.5"
style={{ background: "var(--color-surface)", border: "1px solid var(--border)" }}
>
📎 <span>{f.name}</span>
<span style={{ color: "#999" }}>· {formatFileSize(f.size)}</span>
<button
type="button"
onClick={() => setFiles((prev) => prev.filter((_, j) => j !== i))}
className="ml-1"
style={{ color: "var(--muted-foreground)" }}
>
×
</button>
</div>
))}
</div>
)}
<div className="flex items-center gap-3">
<button
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
className="text-xs px-3 py-2"
style={{ background: "var(--color-surface)", border: "1px solid var(--border)" }}
>
{uploading ? "Загрузка..." : "📎 Прикрепить файл"}
</button>
<span className="text-xs" style={{ color: "#999" }}>
jpg, png, pdf, md · до 10 МБ
</span>
</div>
</div>
{error && (
<p className="text-sm" style={{ color: "var(--destructive)" }}>
{error}
@@ -113,13 +202,13 @@ export default function NewQuestionPage() {
<div className="flex justify-end">
<button
type="submit"
disabled={loading || !title.trim() || !text.trim()}
disabled={loading || uploading || !title.trim() || !text.trim()}
className="text-sm font-bold px-8 py-3"
style={{
background: "var(--foreground)",
color: "var(--background)",
border: "none",
opacity: loading || !title.trim() || !text.trim() ? 0.5 : 1,
opacity: loading || uploading || !title.trim() || !text.trim() ? 0.5 : 1,
}}
>
{loading ? "Отправка..." : "Отправить →"}
src/app/api/questions/route.ts
+27 -1
View File
@@ -4,6 +4,18 @@ import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { sendQuestionCreatedEmail } from "@/lib/email";
interface FileAttachment {
name: string;
url: string;
size: number;
}
function buildS3Prefix(): string {
const endpoint = process.env.S3_ENDPOINT ?? "";
const bucket = process.env.S3_BUCKET ?? "";
return `${endpoint}/${bucket}/`;
}
export async function GET() {
const session = await auth.api.getSession({ headers: await headers() });
if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
@@ -59,16 +71,29 @@ export async function POST(req: NextRequest) {
} catch {
return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
}
const { title, text, courseId } = body as {
const { title, text, courseId, files } = body as {
title: string;
text: string;
courseId?: string;
files?: FileAttachment[];
};
if (!title?.trim() || !text?.trim()) {
return NextResponse.json({ error: "title and text are required" }, { status: 400 });
}
const s3Prefix = buildS3Prefix();
const safeFiles = files
?.filter(
(f) =>
typeof f.name === "string" &&
typeof f.url === "string" &&
f.url.startsWith("https://") &&
f.url.startsWith(s3Prefix) &&
typeof f.size === "number"
)
.map((f) => ({ name: f.name.slice(0, 255), url: f.url, size: Math.max(0, f.size) }));
const question = await prisma.studentQuestion.create({
data: {
userId: session.user.id,
@@ -78,6 +103,7 @@ export async function POST(req: NextRequest) {
create: {
authorId: session.user.id,
text: text.trim(),
files: safeFiles?.length ? (safeFiles as object[]) : undefined,
},
},
},
src/components/questions/QuestionSplitView.tsx
+83 -6
View File
@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect, useCallback } from "react";
import { useState, useEffect, useCallback, useRef } from "react";
interface FileAttachment {
name: string;
@@ -58,11 +58,14 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
const [detail, setDetail] = useState<QuestionDetail | null>(null);
const [tab, setTab] = useState<"open" | "closed">("open");
const [replyText, setReplyText] = useState("");
const [replyFiles, setReplyFiles] = useState<FileAttachment[]>([]);
const [uploading, setUploading] = useState(false);
const [sending, setSending] = useState(false);
const [closing, setClosing] = useState(false);
const [error, setError] = useState("");
const [listError, setListError] = useState("");
const [listLoading, setListLoading] = useState(true);
const fileInputRef = useRef<HTMLInputElement>(null);
const fetchList = useCallback(async () => {
setListError("");
@@ -86,9 +89,36 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
fetchList();
}, [fetchList]);
async function handleFileSelect(e: React.ChangeEvent<HTMLInputElement>) {
const selected = Array.from(e.target.files ?? []);
if (!selected.length) return;
setUploading(true);
setError("");
try {
const uploaded: FileAttachment[] = [];
for (const f of selected) {
const form = new FormData();
form.append("file", f);
const res = await fetch("/api/student/question-upload", { method: "POST", body: form });
if (!res.ok) {
const d = await res.json();
throw new Error(d.error ?? "Ошибка загрузки файла");
}
uploaded.push(await res.json());
}
setReplyFiles((prev) => [...prev, ...uploaded]);
} catch (err) {
setError(err instanceof Error ? err.message : "Ошибка загрузки");
} finally {
setUploading(false);
if (fileInputRef.current) fileInputRef.current.value = "";
}
}
async function selectQuestion(id: string) {
setSelectedId(id);
setReplyText("");
setReplyFiles([]);
setError("");
const res = await fetch(`/api/questions/${id}`);
if (res.ok) {
@@ -105,14 +135,16 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
}
async function handleReply() {
if (!replyText.trim() || !selectedId) return;
if (uploading) return;
if (!replyText.trim() && replyFiles.length === 0) return;
if (!selectedId) return;
setSending(true);
setError("");
try {
const res = await fetch(`/api/questions/${selectedId}/messages`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: replyText.trim() }),
body: JSON.stringify({ text: replyText.trim(), files: replyFiles }),
});
if (!res.ok) throw new Error("Ошибка отправки");
const msg = await res.json();
@@ -120,6 +152,7 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
prev ? { ...prev, messages: [...prev.messages, msg] } : null
);
setReplyText("");
setReplyFiles([]);
fetchList();
} catch {
setError("Не удалось отправить ответ");
@@ -326,6 +359,14 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
className="flex flex-col gap-2"
style={{ opacity: detail.status === "CLOSED" ? 0.5 : 1 }}
>
<input
ref={fileInputRef}
type="file"
multiple
accept=".jpg,.jpeg,.png,.pdf,.md,.txt"
className="hidden"
onChange={handleFileSelect}
/>
<textarea
value={replyText}
onChange={(e) => setReplyText(e.target.value)}
@@ -347,16 +388,52 @@ export function QuestionSplitView({ currentUserId }: { currentUserId: string })
color: "var(--foreground)",
}}
/>
<div className="flex justify-end">
{replyFiles.length > 0 && (
<div className="flex flex-wrap gap-1.5">
{replyFiles.map((f, i) => (
<div
key={f.url}
className="flex items-center gap-1 text-xs px-2 py-1"
style={{ background: "var(--muted)", border: "1px solid var(--border)" }}
>
📎 {f.name}
<span style={{ color: "#999" }}>· {formatFileSize(f.size)}</span>
<button
type="button"
onClick={() => setReplyFiles((prev) => prev.filter((_, j) => j !== i))}
className="ml-1"
style={{ color: "var(--muted-foreground)" }}
>
×
</button>
</div>
))}
</div>
)}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading || detail.status === "CLOSED"}
className="text-xs px-2 py-1"
style={{ background: "var(--muted)", border: "1px solid var(--border)" }}
>
{uploading ? "Загрузка..." : "📎 Прикрепить"}
</button>
<span className="text-xs" style={{ color: "#999" }}>
jpg, png, pdf · 10 МБ
</span>
</div>
<button
onClick={handleReply}
disabled={sending || !replyText.trim() || detail.status === "CLOSED"}
disabled={sending || uploading || ((!replyText.trim()) && replyFiles.length === 0) || detail.status === "CLOSED"}
className="text-xs font-bold px-4 py-2"
style={{
background: "var(--foreground)",
color: "var(--background)",
border: "none",
opacity: sending || !replyText.trim() ? 0.5 : 1,
opacity: sending || uploading || ((!replyText.trim()) && replyFiles.length === 0) ? 0.5 : 1,
}}
>
{sending ? "..." : "Отправить →"}