convex-file-storage

Implements file upload, storage, serving, and deletion workflows in Convex applications.

Updated May 28, 2026
One-click install
npx skills add https://github.com/mrisoli/pokerhouse --skill convex-file-storage-mrisoli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-file-storage
Source: https://github.com/mrisoli/pokerhouse/tree/main/.agents/skills/convex-file-storage
Command: npx skills add https://github.com/mrisoli/pokerhouse --skill convex-file-storage-mrisoli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Handling file uploads and storage in a Convex backend requires coordinating upload URLs, storage IDs, database references, and file serving, which is error-prone without established patterns. ## Core Features & Use Cases - Upload Flows: Generate upload URLs via mutations and POST files directly from React clients with type and size validation. - File Serving & Metadata: Resolve storage IDs to URLs with ctx.storage.getUrl and read file metadata from the _storage system table. - Generated Files & Cleanup: Store blobs produced by actions (PDFs, generated images) and delete storage objects together with their database records. - Use Case: Build an image upload feature with client-side preview, 10MB size validation, and a files table indexed by user and type. ## Quick Start Ask the AI to implement a Convex file upload flow with a React uploader component, a saveFile mutation, and a query that returns the file URL.

Frequently Asked Questions about convex-file-storage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I upload files to Convex storage from React?▼

Call a mutation that returns ctx.storage.generateUploadUrl(), then POST the file to that URL with the correct Content-Type header. The response contains a storageId, which you save to your own table via a second mutation.

How do I serve stored files by URL in Convex?▼

Use ctx.storage.getUrl(storageId) inside a query to resolve a storage ID into a servable URL. Return the URL alongside file metadata so React components can render images, PDFs, or download links.

Can Convex actions store generated files like PDFs or images?▼

Yes, actions running in the Node environment can create a Blob from generated content and persist it with ctx.storage.store(blob), which returns a storage ID. This works for PDFs, API-generated images, and other binary outputs.

How do I access file metadata in Convex?▼

Query the _storage system table with ctx.db.system.get(storageId) to retrieve contentType, sha256, size, and creation time. The older getMetadata approach is deprecated in favor of this system table access.

Why do uploaded files not serve correctly in Convex?▼

The most common cause is omitting the Content-Type header when POSTing to the upload URL, which prevents correct serving. Also verify the storage ID is valid and the file has not been deleted from storage.

What happens to storage files when I delete a database record?▼

Deleting a database row does not remove the underlying storage object, leaving orphaned files. Always call ctx.storage.delete(storageId) before removing the database record that references it.