Cara Upload Gambar ke Supabase Storage di Next.js dengan Aman

Kamu mungkin sudah berhasil menyimpan data teks ke database, tapi mengelola file media seperti gambar butuh pendekatan berbeda. Masalah keamanan dan konsistensi file sering muncul saat fitur upload mulai digunakan oleh banyak orang. Tanpa validasi yang tepat, aplikasi kamu bisa menjadi celah bagi file berbahaya.

Bayangkan storage sebagai sebuah gudang penyimpanan. Jika kamu membiarkan siapa saja masuk tanpa memeriksa barang bawaannya, gudang tersebut akan cepat berantakan atau bahkan berbahaya. Oleh karena itu, kamu perlu melakukan validasi di sisi server sebelum file benar-benar disimpan ke dalam bucket.

Langkah pertama adalah membuat route handler yang menerima data multipart form data. Di sini, kamu wajib memeriksa ukuran file dan tipe media agar tidak ada file sampah yang masuk. Jangan hanya percaya pada informasi tipe file yang dikirimkan oleh browser karena data tersebut sangat mudah dimanipulasi.

Berikut adalah contoh sederhana bagaimana kamu bisa menangani upload di Next.js menggunakan Supabase SDK:

import { createClient } from '@supabase/supabase-js'

export async function POST(request) {
  const formData = await request.formData()
  const file = formData.get('file')

  // Validasi ukuran file (maksimal 2MB)
  if (file.size > 2 * 1024 * 1024) {
    return new Response('File terlalu besar', { status: 400 })
  }

  const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)
  const { data, error } = await supabase.storage
    .from('images')
    .upload(`public/${Date.now()}-${file.name}`, file)

  if (error) return new Response(error.message, { status: 500 })
  return new Response(JSON.stringify(data), { status: 200 })
}

Potongan kode di atas sangat penting karena memastikan file diproses di lingkungan server yang terkendali. Dengan cara ini, kamu bisa menambahkan logika tambahan seperti kompresi gambar atau pengecekan signature file yang lebih mendalam. Jika kamu belum familiar dengan dasarnya, silakan baca cara integrasi Supabase dengan Next.js terlebih dahulu.