File Upload

Supabase Storage-backed uploads (client-side).

Overview

File uploads use Supabase Storage from the browser.

  • Supabase client + helpers: tanstarter/src/lib/supabase.ts
  • UI component: tanstarter/src/components/FileUpload.tsx

By default, the upload component writes to the uploads bucket and uses getPublicUrl, so your bucket (or objects) must be readable.

Required environment variables

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

Supabase setup

In Supabase:

  1. Create a Storage bucket named uploads (or pass a different bucket prop).
  2. Configure bucket/object access so files can be served (since the starter uses public URLs).

If you want private files + signed URLs, swap getPublicUrl for signed URL generation and move upload/download operations server-side.