File Upload Skill
Claude CodeSet up S3 file uploads with presigned URLs in any Next.js project using the Squad UI FileUpload component.
What It Does
When you say "add file upload" in Claude Code, this skill will:
- Install
@aws-sdk/client-s3 and @aws-sdk/s3-request-presigner - Create
lib/s3.ts — S3 client utility - Create
/api/upload/presign — presigned PUT URL (5min expiry) - Create
/api/upload/complete — returns public URL - Create
/api/upload/delete — removes from S3 - Add S3 credentials to
.env.local
Components Installed
Wraps FilePond with Squad UI styling. Supports validation, drag & drop, image preview, rename, and metadata.
Two Upload Modes
mode="endpoint" (S3)
Uploads via presigned URLs to S3/Wasabi. Requires the API routes this skill creates.
mode="supabase"
Uploads directly to Supabase Storage. Zero server code — just needs the auth skill.
Presigned URLs
S3 credentials never leave the server. Browser gets a temporary signed URL.
FilePond Plugins
File size, type, image dimensions, rename, metadata, and image preview — all built in.
How to Install
Installation Steps
- Click "Copy Install Command" above
- Paste into Claude Code and hit enter
- Restart Claude Code (
/exit then reopen) - Open your project and say "add file upload"
Prerequisites
