skills.rest
Rocktown-Labs
Rocktown-LabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

convex-file-storage

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

1|Updated Oct 10, 2025
Search Tags:#react#upload#convex#mutation#file storage#file serving#storage id
One-click install
npx skills add https://github.com/Rocktown-Labs/rivercitymd --skill convex-file-storage-rocktown-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-file-storage
Source: https://github.com/Rocktown-Labs/rivercitymd/tree/main/.cursor/skills/convex-file-storage
Command: npx skills add https://github.com/Rocktown-Labs/rivercitymd --skill convex-file-storage-rocktown-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Handling file uploads, storage, and serving in Convex applications requires coordinating upload URLs, storage IDs, database references, and the _storage system table, 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 content type, size, and SHA-256 from the _storage system table. - Generated Files & Cleanup: Store blobs produced by actions (PDFs, generated images) via ctx.storage.store and delete storage objects alongside their database records. - Use Case: Build an image upload component with preview that validates file type and size, uploads to Convex storage, saves metadata to a files table, and renders the image by URL. ## Quick Start Implement a Convex file upload flow with a generateUploadUrl mutation, a React uploader component, and a query that serves 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 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.

How do I get file metadata like size and content type in Convex?▼

Query the _storage system table with ctx.db.system.get(storageId). It returns _creationTime, contentType, sha256, and size for the stored file.

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

Yes. In a Node action, convert the generated buffer to a Blob and call ctx.storage.store(blob), which returns a storage ID. This works for PDFs, AI-generated images, or any binary content.

Why are my uploaded Convex files not serving correctly?▼

The most common cause is a missing or incorrect Content-Type header during the POST to the upload URL. Also verify the storage ID is valid and the file has not been deleted from storage.

How do I delete files from Convex storage safely?▼

In a mutation, fetch the database record, call ctx.storage.delete(file.storageId), then delete the database row. Deleting both prevents orphaned files from consuming storage.

Related Skills

Explore More Software Engineering Skills→
debsouryadattadebsouryadatta

convex-file-storage

Manage file uploads, serving, storage, and deletion in Convex applications.

Community
Advanced
Rachit246-artRachit246-art

image-work

Standardize React/TypeScript image rendering with placeholder fallbacks and gallery patterns.

Community
Basic
EricJamesCrowEricJamesCrow

convex-file-storage

Store and serve uploaded files with generated URLs in Convex applications.

Community
Advanced
ashishgurpritashishgurprit

File Upload Universal

Validate, scan, and upload files to AWS S3 and Cloudinary.

Community
Advanced