Add image support in flashcards

[nicholaspsmith]

Summary

Enable image attachments on flashcards to support visual learning and diagram-based content.

Motivation

• Visual learning improves retention by 65%
• Essential for: anatomy, art, geography, chemistry, etc.
• Some concepts are hard to describe with text alone
• Matches functionality of Anki and other flashcard apps

Feature Scope

Phase 1: Basic Image Support

• Upload images to flashcard questions/answers
• Display images in study sessions
• Image preview in card editor
• Image deletion

Phase 2: AI Integration

• AI-generated diagrams for concepts
• Image analysis for card generation
• Diagram annotation support

Technical Implementation

Storage Options

1. S3/Cloudflare R2: Object storage for images
2. Database: Store image URLs with flashcard records
3. Optimization: Serve via CDN with responsive sizes

Upload Flow

// Presigned URL approach
async function uploadFlashcardImage(file: File, cardId: string) {
  // Get presigned URL from backend
  const { uploadUrl, publicUrl } = await fetch('/api/upload/presign', {
    method: 'POST',
    body: JSON.stringify({ cardId, contentType: file.type })
  }).then(r => r.json())
  
  // Upload directly to storage
  await fetch(uploadUrl, {
    method: 'PUT',
    body: file,
    headers: { 'Content-Type': file.type }
  })
  
  return publicUrl
}

Database Schema

ALTER TABLE flashcards ADD COLUMN question_image_url TEXT;
ALTER TABLE flashcards ADD COLUMN answer_image_url TEXT;

Image Constraints

• Max file size: 5MB
• Formats: JPEG, PNG, WebP, GIF
• Auto-resize to max 1200px width
• Lazy loading in study view

UI Components

• Image upload dropzone in card editor
• Image preview with zoom capability
• Remove image button
• Progress indicator during upload

Accessibility

• Alt text support for images
• Screen reader descriptions
• Keyboard-accessible image controls

Acceptance Criteria

• Users can upload images to Q or A
• Images display correctly in study sessions
• Images are optimized for fast loading
• Image deletion works properly
• Mobile-friendly upload experience