File uploads

Direct-to-Convex uploads with previews and limits. The standard pattern.

Add file uploads to any feature in 5 minutes. The pattern is the same regardless of file type.

Time: ~15 min. Difficulty: Beginner.

Foundation prompt

Add file upload support to {feature}. Use Convex file storage. Limit:
images only (PNG, JPG, WebP), max 5 MB each, max 10 per {entity}.

Show a drop zone in the form. On upload, generate a thumbnail preview.
Show upload progress per file. Validate type and size on the server.

What vly generates

• A generateUploadUrl mutation.
• Client-side direct-upload code (no proxy through your function).
• A schema field for the storage IDs.
• Preview UI for uploaded files.
• Server-side validation in the mutation that records the upload.

Tips

Always validate on the server. Client-side checks are UX-friendly but bypassable.

Related

Convex file storage

The reference.

Architecture: file uploads

Patterns.

Cloudinary

Advanced image processing.