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,
};
backend/src/db/migrations/048_flashcard_images.sql
+10
View File
@@ -0,0 +1,10 @@
-- 048_flashcard_images.sql
-- Картинки на флэш-карточках: отдельная сторона может нести изображение
-- (диаграмма, формула-скрин, график) в дополнение к тексту.
--
-- Храним ОТНОСИТЕЛЬНЫЙ URL загруженного файла (/uploads/flashcards/<hash>.png),
-- а не сам бинарь — файлы лежат на диске в backend/uploads/flashcards и
-- отдаются статикой. Пустая строка = картинки нет (как front/back).
ALTER TABLE flashcard_cards ADD COLUMN front_image TEXT NOT NULL DEFAULT '';
ALTER TABLE flashcard_cards ADD COLUMN back_image TEXT NOT NULL DEFAULT '';
backend/src/routes/flashcards.js
+27
View File
@@ -1,11 +1,38 @@
const express = require('express');
const router = express.Router();
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const crypto = require('crypto');
const fc = require('../controllers/flashcardController');
const { authMiddleware } = require('../middleware/auth');
const { requireOwnership } = require('../middleware/ownership');
/* ── multer для картинок карточек ───────────────────────────────────────
Файлы складываем в backend/uploads/flashcards, отдаём статикой через
/uploads/flashcards (см. server.js). Имя — случайный hex, расширение из
оригинала (нормализованное). Только изображения, до 5 МБ. */
const _fcUploadsDir = path.join(__dirname, '../../uploads/flashcards');
if (!fs.existsSync(_fcUploadsDir)) fs.mkdirSync(_fcUploadsDir, { recursive: true });
const _fcStorage = multer.diskStorage({
destination: (req, file, cb) => cb(null, _fcUploadsDir),
filename: (req, file, cb) => {
const ext = path.extname(file.originalname).toLowerCase().replace(/[^.a-z0-9]/g, '');
cb(null, crypto.randomBytes(14).toString('hex') + (ext || '.png'));
},
});
const fcUpload = multer({
storage: _fcStorage,
limits: { fileSize: 5 * 1024 * 1024 },
fileFilter: (req, file, cb) =>
cb(null, ['image/jpeg','image/png','image/gif','image/webp'].includes(file.mimetype)),
});
router.use(authMiddleware);
router.post ('/upload', fcUpload.single('file'), fc.uploadImage);
router.post ('/quick', fc.quickAdd);
router.get ('/random', fc.getRandom);
router.get ('/decks', fc.listDecks);
backend/src/server.js
+1
View File
@@ -331,6 +331,7 @@ app.use('/js', express.static(jsDir, staticCache));
app.use('/css', express.static(path.join(frontendDir, 'css'), staticCache));
app.use('/img', express.static(path.join(frontendDir, 'img'), staticCache));
app.use('/avatars', express.static(path.join(__dirname, '../uploads/avatars'), { maxAge: '1d' }));
app.use('/uploads/flashcards', express.static(path.join(__dirname, '../uploads/flashcards'), { maxAge: '7d' }));
// Redirect legacy .html URLs → clean URLs (301)
app.use((req, res, next) => {