Tutorial: File Uploads

Implement secure file uploads with image processing, storage, and delivery.

What You'll Build#

• Presigned URL uploads to S3/R2
• Image processing and optimization
• File type validation
• Progress tracking
• CDN delivery

Prerequisites#

• Next.js project
• AWS S3 or Cloudflare R2 account
• Bootspring initialized

Time Required#

Approximately 30 minutes.

Step 1: Set Up Storage#

Option A: AWS S3#

Option B: Cloudflare R2#

Step 2: Apply Storage Skill#

Step 3: Install Dependencies#

Step 4: Create Storage Client#

Step 5: Create Upload API#

Step 6: Create Upload Component#

Step 7: Add Image Processing#

Step 8: Create Avatar Upload Component#

Step 9: Test Uploads#

1. Start development server:

   Loading code block...

2. Navigate to a page with the upload component

3. Test:

   • File selection works
   • Drag and drop works
   • Progress updates correctly
   • Success state shows
   • Error handling works
   • File appears in S3/R2

Verification Checklist#

• Presigned URLs generate correctly
• Upload progress tracks accurately
• File validation works
• Images display from CDN
• Error states handled

What You Learned#

• Presigned URL uploads
• S3/R2 integration
• File validation
• Progress tracking
• Image processing

Next Steps#

• Add video uploads
• Implement CDN caching
• Add image cropping