convex-file-storage

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

1|Updated Feb 19, 2026
One-click install
npx skills add https://github.com/kausthubh-coder/kriyan-web --skill convex-file-storage-kausthubh-coder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-file-storage
Source: https://github.com/kausthubh-coder/kriyan-web/tree/main/.cursor/skills/convex-file-storage
Command: npx skills add https://github.com/kausthubh-coder/kriyan-web --skill convex-file-storage-kausthubh-coder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Handling file uploads, serving, and cleanup in Convex apps requires coordinating upload URLs, storage IDs, database references, and the _storage system table, which is easy to get wrong without a proven pattern. ## Core Features & Use Cases - Upload Flow: Generate upload URLs via mutations, POST files from React clients, and save file references with metadata in your own tables. - Serving & Metadata: Resolve storage IDs to URLs with ctx.storage.getUrl and read content type, size, and sha256 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 component with client-side preview, type and size validation, and automatic storage cleanup when records are deleted. ## Quick Start Use the convex-file-storage skill to implement a file upload flow with generateUploadUrl, client-side POST, and a saveFile mutation in my Convex app.

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 in your own table via a second mutation.

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

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, embed PDFs, or offer download links.

How do I get file metadata like size and content type 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.

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, AI-generated images, or any binary output.

Why do uploaded Convex files not serve correctly?▼

The most common cause is missing or incorrect Content-Type headers during the POST to the upload URL. Also verify the storage ID is valid and that the file was not deleted from storage while its database reference remains.

How do I delete files from Convex storage safely?▼

Fetch the database record, call ctx.storage.delete(file.storageId) to remove the stored object, then delete the database row with ctx.db.delete. Skipping the storage deletion leaves orphaned files that consume storage quota.