Complete file handling including upload flows, serving files via URL, storing generated files from actions, deletion, and accessing file metadata from system tables
The Convex File Storage skill provides comprehensive file handling capabilities for Convex applications, solving the common challenge of managing user uploads, serving files, and maintaining file metadata. It establishes proper patterns for the complete file lifecycle: generating secure upload URLs, handling client-side uploads, storing file references in the database, and serving files back to users via automatically generated URLs. This skill eliminates the complexity of setting up separate storage infrastructure or integrating third-party services.
The skill covers multiple aspects of file management including support for any file type (images, PDFs, videos, documents), automatic URL generation for serving files, file metadata access through Convex's system tables, and integration with both mutations and actions. It provides both server-side Convex functions for generating upload URLs and saving file references, as well as client-side React components demonstrating the complete upload flow. The implementation includes proper TypeScript typing with Convex validators and handles common edge cases like upload states and error handling.
This skill is ideal for developers building Convex applications that require file upload functionality such as profile picture uploads, document management systems, media libraries, or any application where users need to store and retrieve files. It's particularly valuable for teams wanting to leverage Convex's built-in storage capabilities without managing separate storage services, and for developers who need working examples of the full upload-to-serve pipeline with proper patterns for storing metadata alongside the actual file storage.
Convex file storage supports any file type including images, PDFs, videos, documents, and more. The implementation handles file type information through the Content-Type header during upload and stores it in the database for reference.
The upload process involves three steps: first, generate a secure upload URL using a Convex mutation; second, upload the file directly to that URL using a POST request with the file as the body; third, save the returned storage ID along with metadata to your database. This pattern keeps file uploads separate from database operations for better performance.
Files are served using ctx.storage.getUrl() which generates a URL for the stored file. You can call this in a query function by passing the storage ID, and it returns a URL that can be used directly in image tags, download links, or anywhere you need to access the file.
Yes, the skill supports storing files generated within Convex actions. You can use the storage API within actions to save programmatically created files, making it suitable for use cases like generating PDFs, processing images, or creating reports.
This skill is designed for Convex applications and includes React examples for the client-side implementation. The server-side code works with any Convex backend, while the client examples use React hooks like useMutation. The patterns can be adapted to other frontend frameworks.
Quick Setup:
.claude/skills/Repository
waynesutton/convexskills