0Pricing
Supabase Backend as a Service · Leçon

Téléversement et récupération de contenus multimédias

S’exercer à téléverser des images, des vidéos et d’autres fichiers multimédias, puis à les récupérer pour les afficher dans votre application.

Téléversement et récupération de contenus multimédias est une leçon Supabase Backend as a Service gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Supabase Backend as a Service, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Supabase Backend as a Service comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Téléversement et récupération de contenus multimédias » est-elle gratuite ?

Oui — le texte complet de « Téléversement et récupération de contenus multimédias » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Supabase Backend as a Service, passe à CoddyKit PRO. Le cours Supabase Backend as a Service comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Téléversement et récupération de contenus multimédias » ?

S’exercer à téléverser des images, des vidéos et d’autres fichiers multimédias, puis à les récupérer pour les afficher dans votre application. Tu pratiques Supabase Backend as a Service avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Supabase Backend as a Service ?

Aucune expérience préalable n'est requise. Supabase Backend as a Service sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Téléversement et récupération de contenus multimédias » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Supabase Backend as a Service ?

Oui. Chaque leçon Supabase Backend as a Service inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Stockage de fichiers dans les compartiments Supabase
  2. Gestion des accès avec des politiques
  3. Téléversement et récupération de contenus multimédias
  4. Transformations d’images et URL signées
← Retour à Supabase Backend as a Service