upload-file

Upload File

Lets users upload images or files. Stores them in the cloud, displays them on the site.

Default: Supabase Storage

Already using Supabase for data, so storage is built in.

Step 1: Create Storage Bucket

Via Supabase dashboard:

"Go to Supabase dashboard → Storage → New Bucket. Name it something like 'images' or 'uploads'. Set it to Public if these images should be visible on your site."

Or via SQL:

insert into storage.buckets (id, name, public)
values ('images', 'images', true);

-- Allow anyone to upload (for public forms)
create policy "Anyone can upload" on storage.objects
  for insert with check (bucket_id = 'images');

-- Allow anyone to view (for public images)
create policy "Anyone can view" on storage.objects
  for select using (bucket_id = 'images');

Step 2: Create Upload Component

'use client'

import { createClient } from '@/utils/supabase/client'
import { useState } from 'react'

export function ImageUpload({ onUpload }: { onUpload: (url: string) => void }) {
  const [uploading, setUploading] = useState(false)

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return

    setUploading(true)
    const supabase = createClient()

    // Generate unique filename
    const fileExt = file.name.split('.').pop()
    const fileName = `${Date.now()}-${Math.random().toString(36).slice(2)}.${fileExt}`

    const { error } = await supabase.storage
      .from('images')
      .upload(fileName, file)

    if (error) {
      alert('Upload failed. Try again.')
      setUploading(false)
      return
    }

    // Get the public URL
    const { data: { publicUrl } } = supabase.storage
      .from('images')
      .getPublicUrl(fileName)

    onUpload(publicUrl)
    setUploading(false)
  }

  return (
    <label className="block cursor-pointer">
      <div className="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-gray-400 transition-colors">
        {uploading ? (
          <p className="text-gray-500">Uploading...</p>
        ) : (
          <>
            <p className="text-gray-500">Click to upload an image</p>
            <p className="text-sm text-gray-400 mt-1">PNG, JPG, WebP up to 5MB</p>
          </>
        )}
      </div>
      <input
        type="file"
        accept="image/*"
        onChange={handleUpload}
        className="hidden"
        disabled={uploading}
      />
    </label>
  )
}