Supabase Backend as a Service · Pelajaran

Menyimpan Berkas di Bucket Supabase

Pahami cara membuat dan mengelola bucket penyimpanan serta mengunggah berbagai jenis berkas secara terprogram ke proyek Supabase Anda.

Pelajaran 1 dari 411 langkah

Menyimpan Berkas di Bucket Supabase adalah pelajaran Supabase Backend as a Service gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Supabase Backend as a Service, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Supabase Backend as a Service mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Welcome to Supabase Storage

Managing files like images, videos, and documents is crucial for many apps. Supabase offers a robust, S3-compatible object storage solution right out of the box!

It's designed for scalability and security, letting you store and serve user-generated content or application assets with ease.

Understanding Storage Buckets

Think of a bucket as a top-level folder or container for your files. Each Supabase project can have multiple buckets.

Organize files by type (e.g., avatars, product-images).
Set different security rules for each bucket.
Buckets are isolated, meaning files in one bucket don't mix with another.

Create a Bucket in the Dashboard

You can create buckets directly from the Supabase Dashboard. Navigate to the Storage section and click "New bucket".

Give it a unique name and decide if it should be public or private. We'll explore these options next!

Public or Private Access?

This is a key decision when creating a bucket:

Public Buckets: Anyone with the URL can access files. Great for static assets like profile pictures or public documents.
Private Buckets: Files require authentication and specific policies to be accessed. Ideal for sensitive user data or premium content.

You can change this setting later, but it's good to plan ahead!

Setting Up for Uploads (JS)

To upload files from your app, you'll use the Supabase client library. First, ensure you have your Supabase URL and anon key initialized.

We'll use a simple JavaScript example. Imagine supabase is your initialized client.

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

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

console.log('Supabase client initialized.');

Programmatically Upload a File

The storage.from().upload() method is your go-to for uploading. It needs the bucket name, the path within the bucket, and the file itself.

Let's simulate uploading a simple text file. In a real app, you'd get the file from an HTML <input type="file">.

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

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

async function uploadFile() {
  // In a real app, 'file' would come from an input element
  const mockFile = new File(['Hello CoddyKit!'], 'hello.txt', {
    type: 'text/plain',
  });

  const { data, error } = await supabase.storage
    .from('my-first-bucket') // Replace with your bucket name
    .upload('public/hello_world.txt', mockFile);

  if (error) {
    console.error('Upload error:', error.message);
  } else {
    console.log('Upload successful:', data);
  }
}

uploadFile();

File Paths & Overwrite Behavior

The 'path' in .upload('path/to/file.txt', file) determines where your file lands within the bucket.

'my-image.jpg': Uploads to the bucket's root.
'avatars/user123.png': Creates an avatars folder if it doesn't exist.

By default, uploading to an existing path will overwrite the old file. You can control this with the upsert option.

Controlling Overwrites with Upsert

The upsert option in the upload method lets you decide what happens if a file with the same path already exists.

upsert: true (default): Overwrites the existing file.
upsert: false: Returns an error if a file with the same path exists, preventing accidental overwrites.

Use upsert: false when you want to ensure unique file names.

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

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

async function uploadUniqueFile() {
  const mockFile = new File(['Unique content!'], 'unique.txt', {
    type: 'text/plain',
  });

  // This will fail if 'public/unique.txt' already exists
  const { data, error } = await supabase.storage
    .from('my-first-bucket') // Replace with your bucket name
    .upload('public/unique.txt', mockFile, { upsert: false });

  if (error) {
    console.error('Upload failed (file exists or other error):', error.message);
  } else {
    console.log('Unique upload successful:', data);
  }
}

uploadUniqueFile();

Handles All Your File Needs

Supabase Storage isn't limited to just images or text files. It can handle any file type you throw at it!

Images: PNG, JPG, GIF, SVG
Videos: MP4, MOV, WebM
Documents: PDF, DOCX, XLSX
Audio: MP3, WAV

Just ensure your client-side code provides the correct file object.

Quick Check on Buckets

You've learned about Supabase Storage buckets and how to upload files. Let's test your understanding!

Jawab di pelajaran interaktif

Recap: Storing Files

Great job! You've learned the fundamentals of Supabase Storage:

What buckets are and how to create them.
The difference between public and private buckets.
How to programmatically upload files using the Supabase client.
Controlling file overwrites with the upsert option.

Next, you'll dive into securing your files with Storage Policies!

Gratis untuk memulai

Belajar Supabase Backend as a Service dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 11
Pelajaran: 40

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyimpan Berkas di Bucket Supabase” gratis?

Ya — teks lengkap “Menyimpan Berkas di Bucket Supabase” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Supabase Backend as a Service, upgrade ke CoddyKit PRO. Kursus Supabase Backend as a Service mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyimpan Berkas di Bucket Supabase”?

Pahami cara membuat dan mengelola bucket penyimpanan serta mengunggah berbagai jenis berkas secara terprogram ke proyek Supabase Anda. Kamu berlatih Supabase Backend as a Service dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Supabase Backend as a Service?

Tidak diperlukan pengalaman sebelumnya. Supabase Backend as a Service di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyimpan Berkas di Bucket Supabase” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Supabase Backend as a Service ini?

Ya. Setiap pelajaran Supabase Backend as a Service menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Menyimpan Berkas di Bucket Supabase
Mengelola Akses dengan Kebijakan
Mengunggah dan Mengambil Media
Transformasi Gambar dan URL Bertanda Tangan

← Kembali ke Supabase Backend as a Service