maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(flashcards): картинки на карточках (загрузка, вставка, рендер)

Browse Source 
- Миграция 048: колонки front_image/back_image в flashcard_cards
- Бэкенд: POST /api/flashcards/upload (multer, 5МБ, только изображения),
  валидатор safeImg (только /uploads/flashcards/..., блок XSS/traversal/external),
  картинки в add/update/quick/study/random; статик-маунт /uploads/flashcards
- Редактор: превью+кнопка загрузки+вставка (Ctrl+V) на каждую сторону,
  картинки к ещё не созданной карточке через add-bar
- Режим изучения: рендер изображения над текстом на обеих сторонах
- FAB: вставка картинки в быструю карточку

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-06-02 12:58:24 +03:00
parent 3015a66fab
commit 3d627ce782
6 changed files with 325 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/controllers/flashcardController.js
+37 -13
View File
@@ -1,6 +1,15 @@
const db = require('../db/db');
const { stripTags } = require('../utils/sanitize');
/* ── валидация URL картинки ────────────────────────────────────────────────
Принимаем ТОЛЬКО свои загруженные файлы (/uploads/flashcards/<file>) —
защита от javascript:/data:/внешних URL в src. Всё прочее → пустая строка. */
function safeImg(url) {
if (typeof url !== 'string') return '';
const u = url.trim();
return /^\/uploads\/flashcards\/[A-Za-z0-9._-]+$/.test(u) ? u : '';
}
/* ── SM-2 algorithm ───────────────────────────────────────────────────────
quality: 0 = blackout, 1 = wrong, 2 = wrong but familiar,
3 = correct with difficulty, 4 = correct, 5 = perfect
@@ -97,11 +106,13 @@ function addCard(req, res) {
if (!deck) return res.status(404).json({ error: 'Not found' });
const front = stripTags((req.body.front || '').slice(0, 5000));
const back = stripTags((req.body.back || '').slice(0, 5000));
const front_image = safeImg(req.body.front_image);
const back_image = safeImg(req.body.back_image);
const maxIdx = db.prepare(`SELECT MAX(order_idx) AS m FROM flashcard_cards WHERE deck_id = ?`)
.get(deck.id)?.m ?? -1;
const r = db.prepare(`INSERT INTO flashcard_cards (deck_id, front, back, order_idx) VALUES (?,?,?,?)`)
.run(deck.id, front, back, maxIdx + 1);
res.json({ id: r.lastInsertRowid, deck_id: deck.id, front, back, order_idx: maxIdx + 1 });
const r = db.prepare(`INSERT INTO flashcard_cards (deck_id, front, back, front_image, back_image, order_idx) VALUES (?,?,?,?,?,?)`)
.run(deck.id, front, back, front_image, back_image, maxIdx + 1);
res.json({ id: r.lastInsertRowid, deck_id: deck.id, front, back, front_image, back_image, order_idx: maxIdx + 1 });
}
/* ── POST /api/flashcards/decks/:id/cards/bulk ──────────────────────────── */
@@ -160,9 +171,12 @@ function updateCard(req, res) {
`).get(req.params.id, uid);
if (!card) return res.status(404).json({ error: 'Not found' });
const { front, back } = req.body;
db.prepare(`UPDATE flashcard_cards SET front=?, back=? WHERE id=?`)
.run(front ?? card.front, back ?? card.back, card.id);
res.json({ ok: true });
// Картинки трогаем только если поле реально пришло (пустая строка = очистить).
const frontImg = ('front_image' in req.body) ? safeImg(req.body.front_image) : card.front_image;
const backImg = ('back_image' in req.body) ? safeImg(req.body.back_image) : card.back_image;
db.prepare(`UPDATE flashcard_cards SET front=?, back=?, front_image=?, back_image=? WHERE id=?`)
.run(front ?? card.front, back ?? card.back, frontImg, backImg, card.id);
res.json({ ok: true, front_image: frontImg, back_image: backImg });
}
/* ── DELETE /api/flashcards/cards/:id ──────────────────────────────────── */
@@ -186,7 +200,7 @@ function getStudySession(req, res) {
if (!deck) return res.status(404).json({ error: 'Not found' });
// due cards first, then new cards (no review yet), limit 20
const cards = db.prepare(`
SELECT c.id, c.front, c.back,
SELECT c.id, c.front, c.back, c.front_image, c.back_image,
COALESCE(r.ease_factor, 2.5) AS ease_factor,
COALESCE(r.interval_days, 1) AS interval_days,
COALESCE(r.repetitions, 0) AS repetitions,
@@ -273,7 +287,9 @@ function quickAdd(req, res) {
const uid = req.user.id;
const front = stripTags((req.body.front || '').slice(0, 5000)).trim();
const back = stripTags((req.body.back || '').slice(0, 5000)).trim();
if (!front) return res.status(400).json({ error: 'Лицевая сторона обязательна' });
const front_image = safeImg(req.body.front_image);
const back_image = safeImg(req.body.back_image);
if (!front && !front_image) return res.status(400).json({ error: 'Заполни лицевую сторону (текст или картинку)' });
let deck = null;
const deckId = Number(req.body.deckId) || 0;
@@ -294,9 +310,9 @@ function quickAdd(req, res) {
const maxIdx = db.prepare(`SELECT MAX(order_idx) AS m FROM flashcard_cards WHERE deck_id = ?`)
.get(deck.id)?.m ?? -1;
const r = db.prepare(`INSERT INTO flashcard_cards (deck_id, front, back, order_idx) VALUES (?,?,?,?)`)
.run(deck.id, front, back, maxIdx + 1);
res.json({ id: r.lastInsertRowid, deck_id: deck.id, deck_title: deck.title, deck_color: deck.color, front, back });
const r = db.prepare(`INSERT INTO flashcard_cards (deck_id, front, back, front_image, back_image, order_idx) VALUES (?,?,?,?,?,?)`)
.run(deck.id, front, back, front_image, back_image, maxIdx + 1);
res.json({ id: r.lastInsertRowid, deck_id: deck.id, deck_title: deck.title, deck_color: deck.color, front, back, front_image, back_image });
}
/* ── GET /api/flashcards/random — случайная карточка из всего пула ───────
@@ -310,7 +326,7 @@ function getRandom(req, res) {
if (!total) return res.json({ card: null, total: 0 });
const card = db.prepare(`
SELECT c.id, c.front, c.back, c.deck_id,
SELECT c.id, c.front, c.back, c.front_image, c.back_image, c.deck_id,
d.title AS deck_title, d.color AS deck_color
FROM flashcard_cards c
JOIN flashcard_decks d ON d.id = c.deck_id
@@ -320,9 +336,17 @@ function getRandom(req, res) {
res.json({ card, total });
}
/* ── POST /api/flashcards/upload — загрузка картинки для карточки ──────────
multipart (поле file). Возвращает { url } для сохранения в front_image /
back_image. Сам файл уже на диске (multer); БД здесь не трогаем. */
function uploadImage(req, res) {
if (!req.file) return res.status(400).json({ error: 'Файл не получен (только изображения до 5 МБ)' });
res.json({ url: `/uploads/flashcards/${req.file.filename}` });
}
module.exports = {
listDecks, createDeck, updateDeck, deleteDeck,
getCards, addCard, addCardsBulk, updateCard, deleteCard, reorderCards,
getStudySession, submitReview, getStats,
quickAdd, getRandom,
quickAdd, getRandom, uploadImage,
};