Image Upload Configuration

This project uses Supabase Storage for image uploads. Once configured, any feature that needs image upload (contact form, user avatars, etc.) can use the same infrastructure.

Currently, image upload is used in the Contact form (/contact), where users can attach screenshots when submitting feedback or bug reports.

Setup

1. Create a Storage Bucket

Go to Supabase Dashboard → Storage → New bucket:

Name: Choose a name for your use case (e.g. contact-attachments)
Public bucket: Enabled (if images need to be publicly accessible, such as in notification emails)
Restrict file size: 5 (MB) — adjust as needed
Restrict MIME types: image/jpeg, image/png, image/gif, image/webp

2. Add RLS Policies

Go to Supabase Dashboard → SQL Editor and run:

CREATE POLICY "Allow public uploads" ON storage.objects
  FOR INSERT WITH CHECK (bucket_id = 'your-bucket-name');

CREATE POLICY "Allow public reads" ON storage.objects
  FOR SELECT USING (bucket_id = 'your-bucket-name');

Replace your-bucket-name with the actual bucket name you created.

Contact Form Example

The contact form at /contact uses a bucket named contact-attachments and supports:

File picker — click to select images
Paste upload — Ctrl+V to paste screenshots from clipboard
Up to 3 images per submission, 5MB each
Supported formats: JPEG, PNG, GIF, WebP

Image URLs are stored in the metadata JSONB column of the contact_submissions table:

{
  "referer": "https://yoursite.com/contact",
  "attachments": [
    "https://xxx.supabase.co/storage/v1/object/public/contact-attachments/xxx/image.png"
  ]
}

The notification email includes clickable image thumbnails.

Storage Usage

Supabase free plan provides 1GB of storage. At ~200-500KB per screenshot, this can hold thousands of images — more than enough for most projects.

If you need more storage, here are some options:

Upgrade Supabase plan — The simplest option. Pro plan offers 100GB storage.
Third-party object storage — Replace Supabase Storage with services like Cloudflare R2 (no egress fees), AWS S3, or Alibaba Cloud OSS. Just swap the upload logic in your code to use the new provider's SDK.
Image compression — Compress images or convert to WebP before uploading to reduce file size. This can be done client-side to extend your existing storage capacity.