Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Menyimpan gambar dalam database umumnya tidak disarankan. Melakukannya dapat dengan cepat menjadi mahal karena jumlah penyimpanan dan daya pemrosesan yang diperlukan. Menggunakan layanan penyimpanan yang hemat biaya dan dapat diskalakan seperti penyimpanan Supabase lebih baik.

Di bawah ini Anda akan mempelajari cara mengunggah gambar ke keranjang penyimpanan menggunakan pustaka klien Supabase JavaScript dan cara menyajikan gambar dalam aplikasi Next.js.

Membuat Proyek Supabase

Jika Anda belum memiliki aplikasi Next.js, ikuti yang resmi Panduan memulai Next.js untuk membuat aplikasi Anda.

Setelah Anda selesai melakukannya, ikuti langkah-langkah ini untuk membuat database Supabase:

  1. Arahkan ke situs web Supabase dan buat akun baru. Jika Anda sudah memiliki akun, masuk.
  2. Dari dasbor Supabase, klik Buat proyek baru tombol.
  3. Beri nama proyek Anda dan klik
    instagram viewer
    Buat proyek tombol. Setelah Supabase membuat proyek, itu akan mengarahkan Anda ke dasbor proyek

Setelah membuat proyek, buat keranjang penyimpanan.

Membuat Bucket Penyimpanan Supabase

Bucket penyimpanan memungkinkan Anda menyimpan file media seperti gambar dan video. Di Supabase, Anda dapat membuat keranjang penyimpanan di dasbor atau menggunakan pustaka klien.

Untuk menggunakan dasbor, ikuti langkah-langkah berikut:

  1. Pergi ke Penyimpanan Supabase halaman di Dasbor.
  2. Klik Ember Baru dan masukkan nama untuk keranjang. Anda dapat menamainya gambar karena Anda akan menyimpan gambar di dalamnya.
  3. Klik Buat Ember.

Selanjutnya, Anda akan menyiapkan klien Supabase di aplikasi Anda untuk berinteraksi dengan bucket.

Menyiapkan Klien Supabase

Mulailah dengan menginstal pustaka klien supabase-js melalui terminal:

npm instal @supabase/supabase-js

Kemudian buat folder baru bernama lib di root aplikasi Anda atau di folder src jika Anda menggunakannya. Di folder ini, tambahkan file baru bernama supabase.js dan gunakan kode berikut untuk menginisialisasi klien Supabase.

impor { buatKlien } dari'@supabase/supabase-js'
eksporconst supabase = buatKlien('', '')

Ganti URL proyek dan kunci anon dengan detail Anda sendiri yang dapat Anda temukan di Pengaturan proyek Supabase. Anda dapat menyalin detailnya di file .env dan mereferensikannya dari sana.

SUPABASE_PROJECT_URL="url_proyek_anda"
SUPABASE_PROJECT_ANON_KEY="proyek_Anda_anon_key"

Sekarang, di supabase.js, Anda harus memiliki:

eksporconst supabase = buatKlien(
 process.env. SUPABASE_PROJECT_URL,
 process.env. SUPABASE_ANON_KEY
);

Setelah Anda selesai melakukannya, buat formulir yang akan menerima gambar.

Membuat Formulir yang Menerima Gambar

Di dalam folder aplikasi Next.js aplikasi Anda, buat subfolder bernama mengunggah dan tambahkan file baru bernama halaman.js. Ini akan membuat halaman baru yang tersedia di rute /upload. Jika Anda menggunakan Next.js 12, buat upload.js di halaman map.

Di halaman unggah, tambahkan kode berikut, untuk membuat formulir.

"gunakan klien";
impor { status penggunaan } dari"reaksi";
eksporbawaanfungsiHalaman() {
const [file, setfile] = useState([]);


const handleSubmit = asinkron (e) => {
 e.preventDefault();
// unggah gambar
 };


const handleFileSelected = (e) => {
 setfile (e.target.files[0]);
 };
kembali (


"mengajukan" nama="gambar" onChange={handleFileSelected} />

Saat Anda memilih file dan mengklik tombol kirim, formulir tersebut akan memanggil fungsi handleSubmit. Dalam fungsi ini, Anda akan mengunggah gambar.

Untuk formulir besar dengan beberapa bidang, akan lebih mudah gunakan pustaka formulir seperti formik untuk menangani validasi dan penyerahan.

Mengunggah File Gambar ke Bucket Penyimpanan Supabase

Pada fungsi handleSubmit, gunakan klien Supabase untuk mengunggah gambar dengan menambahkan kode di bawah ini.

const handleSubmit = asinkron (e) => {
 e.preventDefault();
const nama file = `${uuidv4()}-${file.nama}`;
const { data, kesalahan } = menunggu supabase.storage
 .dari("gambar-gambar")
 .upload (nama file, file, {
 Kontrol cache: "3600",
 naik: PALSU,
 });
const filepath = data.path;
// simpan filepath di database
 };

Dalam fungsi ini, Anda membuat nama file unik dengan menggabungkan nama file dan UUID yang dihasilkan oleh paket uuid npm. Ini disarankan untuk menghindari penimpaan file dengan nama yang sama.

Anda perlu menginstal paket uuid melalui npm jadi salin dan jalankan perintah di bawah ini di terminal.

npm instal uuid

Kemudian, di bagian atas halaman upload, import versi 4 dari uuid.

impor {v4 sebagai uuidv4 } dari"uuid";

Jika Anda tidak ingin menggunakan paket uuid, ada beberapa lainnya metode yang dapat Anda gunakan untuk menghasilkan id unik.

Selanjutnya, gunakan klien supabase untuk mengunggah file ke keranjang penyimpanan yang disebut "gambar". Ingatlah untuk mengimpor klien supabase di bagian atas file Anda.

impor { supabase } dari"@/lib/supabase";

Perhatikan bahwa Anda melewati jalur ke gambar dan gambar itu sendiri. Jalur ini berfungsi sama seperti di sistem file. Misalnya, jika Anda menyimpan gambar ke folder dalam keranjang bernama publik, Anda akan menentukan jalurnya sebagai "/public/filename".

Supabase akan mengembalikan objek yang berisi data dan objek kesalahan. Objek data berisi URL ke gambar yang baru saja Anda unggah.

Agar fungsi pengunggahan ini berfungsi, Anda harus membuat kebijakan akses yang memungkinkan aplikasi Anda memasukkan dan membaca data di keranjang penyimpanan Supabase dengan mengikuti langkah-langkah berikut:

  1. Di dasbor proyek Anda, klik pada Penyimpanan tab di sidebar kiri.
  2. Pilih keranjang penyimpanan Anda dan klik pada Mengakses tab.
  3. Di bawah Kebijakan keranjang, klik Kebijakan baru tombol.
  4. Pilih Untuk kustomisasi penuh opsi untuk membuat kebijakan dari awal.
  5. Dalam Tambahkan kebijakan dialog, masukkan nama untuk kebijakan Anda (mis. "Izinkan Sisipkan dan Baca").
  6. Pilih MENYISIPKAN Dan PILIH izin dari Operasi yang diizinkan menu drop down.
  7. Klik Tinjauan tombol untuk meninjau kebijakan.
  8. Klik Menyimpan tombol untuk menambahkan kebijakan.

Anda sekarang seharusnya dapat mengunggah gambar tanpa menimbulkan kesalahan akses.

Melayani Gambar yang Diunggah di Aplikasi Anda

Untuk menayangkan gambar di situs Anda, Anda memerlukan URL publik, yang dapat diambil dengan dua cara berbeda.

Anda dapat menggunakan klien Supabase seperti ini:

const jalur file = "path_to_file_in_buckey"
const { data } = supabase
 .penyimpanan
 .dari('gambar-gambar')
 .getPublicUrl(`${filepath}`)

Atau Anda dapat menggabungkan URL keranjang secara manual dengan jalur file:

const jalur file = `${bucket_url}/${filepath}`

Gunakan metode mana yang Anda sukai. Setelah Anda memiliki jalur file, Anda dapat menggunakannya di komponen gambar Next.js seperti ini:

"" lebar={200} tinggi={200}/>

Kode ini akan menampilkan gambar di situs Anda.

Membuat Aplikasi Kuat Dengan Supabase

Dengan menggunakan kode ini, Anda dapat menerima file dari pengguna melalui formulir dan mengunggahnya ke penyimpanan Supabase. Anda kemudian dapat mengambil gambar itu dan menyajikannya di situs Anda.

Selain menyimpan gambar, Supabase memiliki fungsi lain. Anda dapat membuat database PostgreSQL, menulis fungsi edge, dan menyiapkan autentikasi untuk pengguna Anda.