0Pricing
Supabase Backend as a Service · Ders

Medya Yükleme ve Alma

Görselleri, videoları ve diğer medya dosyalarını yüklemeyi, ardından bunları uygulamanızda görüntülemek üzere almayı deneyin.

Medya Yükleme ve Alma, CoddyKit'te ücretsiz bir Supabase Backend as a Service dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Supabase Backend as a Service öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Supabase Backend as a Service kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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 the Cache-Control header, telling browsers how long to cache the file.
  • upsert: A boolean. If true, an existing file at the specified path will be overwritten. If false (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.

Sıkça Sorulan Sorular

“Medya Yükleme ve Alma” dersi ücretsiz mi?

Evet — “Medya Yükleme ve Alma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Supabase Backend as a Service kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Supabase Backend as a Service kursu toplamda 4 dersten oluşur.

“Medya Yükleme ve Alma” dersinde ne öğreneceğim?

Görselleri, videoları ve diğer medya dosyalarını yüklemeyi, ardından bunları uygulamanızda görüntülemek üzere almayı deneyin. Supabase Backend as a Service ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Supabase Backend as a Service öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Supabase Backend as a Service, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Medya Yükleme ve Alma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Supabase Backend as a Service dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Supabase Backend as a Service dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Supabase Paketlerinde Dosya Saklama
  2. İlkelerle Erişimi Yönetme
  3. Medya Yükleme ve Alma
  4. Görsel Dönüşümleri ve İmzalı URL'ler
← Supabase Backend as a Service Sayfasına Dön