Skip to content

STORAGE_FIX.md

Latest commit

 

History

History
165 lines (125 loc) · 4.25 KB

STORAGE_FIX.md

File metadata and controls

165 lines (125 loc) · 4.25 KB

Storage Upload Fix - Quick Guide

Problem

Getting "Failed to upload image" error when submitting reports.

Root Cause

The Supabase storage bucket report-images is not configured yet.

Solution (2 Steps)

Step 1: Create Bucket in Supabase

  1. Go to Supabase Dashboard:

  2. Click "New bucket"

  3. Configure:

    • Name: report-images
    • Public bucket: ✅ CHECK THIS (allows public URL access to view images)
    • File size limit: 5MB (optional)
    • Click "Create bucket"

Step 2: Verify Service Role Key

Make sure your .env.local file has the service role key:

SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here

You can find this in: Supabase Dashboard → Project Settings → API → service_role key (secret)

Important: The backend uses the service role key to upload files, bypassing RLS policies. No storage policies needed!

How It Works

  • ✅ Backend handles uploads: The /api/upload endpoint uses SUPABASE_SERVICE_ROLE_KEY
  • ✅ No RLS policies needed: Service role bypasses all Row Level Security
  • ✅ Public bucket: Allows anyone to view uploaded images via public URL
  • ✅ Secure: Only your backend can upload files (not exposed to client)

Verify Setup

Option 1: Run Test Script

node scripts/test-storage.mjs

This will:

  • ✅ Check if bucket exists
  • ✅ Test anonymous upload
  • ✅ Verify public URL access
  • ✅ Clean up test file

Option 2: Test via Frontend

  1. Start dev server: pnpm dev
  2. Go to: http://localhost:3000/report
  3. Upload an image
  4. Submit report
  5. Should succeed! ✅

Option 3: Test via cURL

# Create a test image first
curl -X POST http://localhost:3000/api/upload \
  -F "file=@test-image.jpg"

Troubleshooting

Error: "Bucket not found"

  • ❌ Bucket doesn't exist
  • ✅ Go create it in Supabase Dashboard

Error: "Policy violation" or "Permission denied"

  • ❌ Storage policies not configured
  • ✅ Add the SQL policies above

Error: "Failed to upload image"

  • Check console logs in terminal (shows detailed error)
  • Verify bucket name is exactly report-images
  • Verify bucket is marked as Public
  • Verify policies allow anon role

Error: "Images uploaded but not visible"

  • ❌ Bucket not public or missing read policy
  • ✅ Enable public reads in policies

What Gets Fixed

Once configured, these features work:

  • ✅ Anonymous report submissions with photos
  • ✅ Image uploads from /report page
  • ✅ Public image URLs for viewing reports
  • ✅ Image deletion for authenticated users

Architecture

User submits report with photo
    ↓
POST /api/upload
    ↓
Supabase Storage (report-images bucket)
    ↓
Returns public URL
    ↓
POST /api/reports/submit (with imageUrl)
    ↓
Saves to database
    ↓
Redirects to thank-you page

Security Notes

  • ✅ Anonymous uploads: Allowed (for community reports)
  • ✅ Public reads: Required (to view report images)
  • ✅ Rate limiting: Applied at report submission level (5/day per device)
  • ✅ File validation: Type & size checked before upload
  • ⚠️ Consider: Add content moderation for production

Additional Configuration (Optional)

Add File Size Limit in Bucket Settings

  1. Go to Storage → Buckets → report-images
  2. Edit bucket
  3. Set: Max file size = 5MB

Enable Image Transformations

  1. Go to Storage → Settings
  2. Enable image transformations
  3. Automatic optimization for web delivery

Add Authenticated Delete Policy

CREATE POLICY "Allow authenticated delete"
ON storage.objects FOR DELETE
TO authenticated
USING (bucket_id = 'report-images');

Quick Reference

Item Value
Bucket name report-images
Public Yes ✅
Max size 5MB
Allowed types JPEG, PNG, WebP
Anonymous upload Enabled
Public read Enabled

Related Files

  • app/api/upload/route.ts - Upload endpoint (improved error messages)
  • app/api/reports/submit/route.ts - Report submission
  • scripts/test-storage.mjs - Automated test script
  • scripts/setup-storage.sh - Setup instructions
  • .github/REPORT_BACKEND_SETUP.md - Full backend documentation

Status after setup: ✅ Ready to upload images!