Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Convex File Storage

Ready-to-use Convex patterns for file uploads, URL serving, deletion, and `_storage` metadata access.

Dev & CodingIntermediate★ 404⑂ 32AI score 7/10Last updated: Feb 6, 2026

What it does

  • Implements Convex's three-step upload flow: generate an upload URL with ctx.storage.generateUploadUrl(), POST the file, then persist the storageId reference in your own table.
  • Produces queries that serve files via ctx.storage.getUrl() plus React components that render images, PDFs (iframe), or download links by content type.
  • Shows how to store files generated inside actions (PDF reports, AI images) with ctx.storage.store(blob) and read size/sha256/contentType from the _storage system table.
  • Includes a schema with indexes, a delete mutation that cleans up both storage and DB rows, and a list of common pitfalls.

Who it's for

  • Developers building on Convex who need avatars, image uploads, or file attachments.
  • React + TypeScript frontend devs who want client-side type/size validation and image previews.
  • Teams storing generated artifacts (PDFs, AI images) from server actions.

Examples

  1. "Add a profile avatar uploader" → generates the upload-URL mutation, save-file mutation, and an uploader component with preview.
  2. "Attach multiple images to a post and clean up storage on delete" → imageStorageIds schema plus a mutation deleting storage and record together.
  3. "Generate a PDF in an action and return a download link" → a "use node" action storing a Blob and a getUrl query for the link.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/waynesutton/convexskills/HEAD/skills/convex-file-storage/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/convex-file-storage folder from the GitHub repo waynesutton/convexskills into my ~/.claude/skills/convex-file-storage/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/waynesutton/convexskills.git /tmp/convexskills && mkdir -p ~/.claude/skills && cp -r /tmp/convexskills/skills/convex-file-storage ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal (Terminal on macOS/Linux; WSL or Git Bash on Windows).
  2. Clone the repo: git clone https://github.com/waynesutton/convexskills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy just this skill: cp -r convexskills/skills/convex-file-storage ~/.claude/skills/
  5. Verify it landed: ls ~/.claude/skills/convex-file-storage/SKILL.md
  6. Restart Claude Code and try a prompt like "Add Convex file upload with image preview".
  7. Prerequisite: an existing Convex project (a convex/ directory and the convex package) for the generated code to work.
View source on GitHub ↗License: Apache-2.0