convex-file-storage
Complete file handling including upload flows, serving files via URL, storing generated files from actions, deletion, and accessing file metadata from system tables
By waynesutton · 2,530 installs
npx skills add waynesutton/convexskills --skill convex-file-storage
Source repository · Upstream listing
Convex File Storage
Handle file uploads, storage, serving, and management in Convex applications with proper patterns for images, documents, and generated files.
Documentation Sources
Before implementing, do not assume; fetch the latest documentation:
Primary: https://docs.convex.dev/file storage
Upload Files: https://docs.convex.dev/file storage/upload files
Serve Files: https://docs.convex.dev/file storage/serve files
For broader context: https://docs.convex.dev/llms.txt
Instructions
File Storage Overview
Convex provides built in file storage with:
Automatic URL generation for serving files
Support for any file type (images, PDFs, videos, etc.)
File metadata via the storage system table
Integration with mutations and actions
Generating Upload URLs
Client Side Upload
Saving File References
Serving Files via URL
Displaying Files in React
Storing Generated Files from Actions
Accessing File Metadata
Deleting Files
Image Upload with Preview
Examples
Schema for File Storage
Best Practices
Never run npx convex deploy unless explicitly instructed
Never run any git commands unless explicitly instructed
Validate file types and sizes on the client before uploading
Store file metadata (name, type, size) in your own table
Use the storage system table only for Convex metadata
Delete storage files when deleting database references
Use appropriate Content Type headers when uploading
Consider image optimization for large images
Common Pitfalls
1. Not setting Content Type header Files may not serve correctly
2. Forgetting to delete storage Orphaned files waste storage
3. Not validating file types Security risk for malicious uploads
4. Large file uploads without progress Poor UX for users
5. Using deprecated getMetadata Use ctx.db.system.get instead
References
Convex Documentation: https://docs.convex.dev/
Convex LLMs.txt: https://docs.convex.dev/llms.txt
File Storage: https://docs.convex.dev/file storage
Upload Files: https://docs.convex.dev/file storage/upload files
Serve Files: https://docs.convex.dev/file storage/serve files