File Upload

File Upload

Handles uploading lesson materials and extracting text content for AI processing. Supports multiple file formats via drag-and-drop, plus direct text paste as a fallback.

Overview

• Upload: Drag-and-drop or click to select files
• Storage: Files stored in Convex file storage via presigned URL pattern
• Parsing: Extract text from various formats in a Convex action with image preservation
• Fallback: Text paste/type for when file upload isn't needed

When to Use This Skill

• Building the file upload UI component
• Implementing file parsing logic
• Setting up Convex file storage
• Handling file type validation and errors

Key Concepts

Supported Formats

Upload Flow (Convex 3-Step Pattern)

1. Client calls generateUploadUrl mutation → gets short-lived presigned URL
2. Client POSTs file to that URL with Content-Type header → gets { storageId } in response
3. Client passes storageId to a Convex action for parsing, or stores it in a document

From Convex docs: ctx.storage.generateUploadUrl() returns a Promise<string>. The POST response JSON contains { storageId: Id<"_storage"> }.

File Reading in Actions

• ctx.storage.get(storageId) returns Blob | null in actions
• ctx.storage.getUrl(storageId) returns string | null in queries/mutations (public URL)
• Use dynamic import() (not require()) for parsing libraries in Convex actions

File Size Limits

• Max file: 10MB (reasonable for lesson materials)
• Client-side validation before upload attempt

Related Files

• convex/files.ts — Upload URL generation, file parsing action
• Homepage upload component

Reference Files

• reference.md — Upload and parsing code examples