Mengunggah dan Mengambil Media
Berlatih mengunggah gambar, video, dan berkas media lainnya, lalu mengambilnya untuk ditampilkan dalam aplikasi Anda.
Mengunggah dan Mengambil Media adalah pelajaran Supabase Backend as a Service gratis di CoddyKit. Ini adalah pelajaran 3 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.
Media for Dynamic Apps
User avatars, product images, videos – media makes applications rich and engaging. Learning to manage files effectively is crucial for modern app development.
In this lesson, we'll focus on using the Supabase Storage client to upload various media types and retrieve them for display.
The Supabase Storage Client
The supabase.storage client is your gateway to interacting with file storage. It allows you to perform operations like uploading, downloading, and managing files within your Supabase buckets.
You'll typically initialize your Supabase client once in your application.
Preparing Files for Upload
Before you can upload a file, you need its data. In web applications, this often comes from an HTML <input type="file"> element, giving you a File or Blob object.
For our examples, we'll simulate a Blob object to represent file data, making the code runnable.
Uploading Your First File
Use the upload() method to send a file to a specific bucket path. You'll need to specify the bucket name, the desired file path (including the filename), and the file's data.
Try running this example to see a simulated file upload:
// Assume 'createClient' is imported from '@supabase/supabase-js'
// Assume 'SUPABASE_URL' and 'SUPABASE_ANON_KEY' are configured
const createClient = (url, key) => ({
storage: {
from: (bucketName) => ({
upload: async (filePath, fileData, options) => {
console.log(`[MOCK] Uploading to bucket '${bucketName}', path '${filePath}'`);
console.log(`[MOCK] File data type: ${fileData.type}, size: ${fileData.size}`);
console.log(`[MOCK] Options: ${JSON.stringify(options)}`);
return { data: { path: filePath, id: 'mock-id' }, error: null };
}
})
}
});
const SUPABASE_URL = 'https://your-project.supabase.co'; // Replace with your URL
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY'; // Replace with your Anon Key
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function uploadExample() {
const fileData = new Blob(['Hello CoddyKit!'], { type: 'text/plain' });
const fileName = 'lesson-note.txt';
const filePath = `public/${fileName}`; // Store in a 'public' folder
try {
const { data, error } = await supabase
.storage
.from('my-bucket') // Use your actual bucket name
.upload(filePath, fileData, {
cacheControl: '3600', // Cache for 1 hour
upsert: false // Do not overwrite if file exists
});
if (error) {
throw error;
}
console.log('Upload successful:', data);
} catch (error) {
console.error('Error uploading file:', error.message);
}
}
uploadExample();Understanding Upload Options
The upload() method accepts an options object to fine-tune the upload process:
cacheControl: Sets theCache-Controlheader, telling browsers how long to cache the file.upsert: A boolean. Iftrue, an existing file at the specified path will be overwritten. Iffalse(default), it will error if the file exists.contentType: The MIME type of the file (e.g.,'image/jpeg'). Often inferred, but good to set explicitly for accuracy.
Retrieving Public URLs
For files stored in buckets with public access (configured via Storage Policies), you can get a direct, publicly accessible URL. This URL can be used in <img> tags, <video> tags, or as direct download links.
The getPublicUrl() method will give you this link.
// Assume 'createClient' is imported and configured
const createClient = (url, key) => ({
storage: {
from: (bucketName) => ({
getPublicUrl: (filePath) => {
console.log(`[MOCK] Getting public URL for bucket '${bucketName}', path '${filePath}'`);
return { data: { publicUrl: `https://mock.supabase.co/storage/v1/object/public/${bucketName}/${filePath}` } };
}
})
}
});
const SUPABASE_URL = 'https://your-project.supabase.co';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
function getPublicUrlExample() {
const filePath = 'public/lesson-note.txt'; // Path of your uploaded file
const { data } = supabase
.storage
.from('my-bucket') // Use your actual bucket name
.getPublicUrl(filePath);
console.log('Public URL:', data.publicUrl);
}
getPublicUrlExample();Displaying Media in Your App
Once you have the public URL from getPublicUrl(), displaying media in your application is straightforward. You simply use the URL in the appropriate HTML element's src attribute.
- Images:
<img src="YOUR_PUBLIC_URL" alt="description"> - Videos:
<video src="YOUR_PUBLIC_URL" controls></video> - Audio:
<audio src="YOUR_PUBLIC_URL" controls></audio>
Securely Accessing Private Media
Not all files should be publicly accessible. For private files (e.g., user documents, sensitive media) protected by RLS policies, you can't use a simple public URL.
Supabase provides signed URLs for secure, temporary access to these private files. These URLs include a temporary token that expires after a set duration.
Generating Signed URLs
The createSignedUrl() method generates a temporary URL for a private file. You specify the file path and how long (in seconds) the URL should be valid.
This is ideal for scenarios where you want to grant authenticated users temporary access to private content without making it globally public.
// Assume 'createClient' is imported and configured
const createClient = (url, key) => ({
storage: {
from: (bucketName) => ({
createSignedUrl: async (filePath, expiresIn) => {
console.log(`[MOCK] Creating signed URL for bucket '${bucketName}', path '${filePath}', expires in ${expiresIn}s`);
return { data: { signedUrl: `https://mock.supabase.co/storage/v1/object/sign/${bucketName}/${filePath}?token=mock-token&expires=${expiresIn}` }, error: null };
}
})
}
});
const SUPABASE_URL = 'https://your-project.supabase.co';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function getSignedUrlExample() {
const privateFilePath = 'private/user-report.pdf'; // Path to a private file
const expiresInSeconds = 60; // URL valid for 60 seconds
try {
const { data, error } = await supabase
.storage
.from('my-private-bucket') // Use your actual private bucket name
.createSignedUrl(privateFilePath, expiresInSeconds);
if (error) {
throw error;
}
console.log('Signed URL:', data.signedUrl);
console.log(`This URL will expire in ${expiresInSeconds} seconds.`);
} catch (error) {
console.error('Error creating signed URL:', error.message);
}
}
getSignedUrlExample();Upload & Retrieve Check
Let's test your understanding of uploading and retrieving media with Supabase Storage.
Media Management Mastered
You've successfully learned how to:
- Upload files to Supabase Storage buckets using
upload(). - Retrieve public URLs for immediate display with
getPublicUrl(). - Generate secure, time-limited signed URLs for private content using
createSignedUrl().
These skills are fundamental for building rich, dynamic applications that handle user-generated content or managed media assets securely and efficiently.
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
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengunggah dan Mengambil Media” gratis?
Ya — teks lengkap “Mengunggah dan Mengambil Media” 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 “Mengunggah dan Mengambil Media”?
Berlatih mengunggah gambar, video, dan berkas media lainnya, lalu mengambilnya untuk ditampilkan dalam aplikasi 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 3 dari 4.
Berapa lama pelajaran “Mengunggah dan Mengambil Media” 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