Supabase Backend as a Service · Lesson

Uploading and Retrieving Media

Practice uploading images, videos, and other media files, and then retrieving them for display in your application.

Uploading and Retrieving Media is a free Supabase Backend as a Service lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Supabase Backend as a Service learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Frequently asked questions

Is the “Uploading and Retrieving Media” lesson free?

Yes — the full text of “Uploading and Retrieving Media” is free to read here on the web, and the Supabase Backend as a Service course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Supabase Backend as a Service course, upgrade to CoddyKit PRO.

What will I learn in “Uploading and Retrieving Media”?

Practice uploading images, videos, and other media files, and then retrieving them for display in your application. You practise Supabase Backend as a Service with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Supabase Backend as a Service?

No prior experience is required. Supabase Backend as a Service on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Uploading and Retrieving Media” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Supabase Backend as a Service lesson?

Yes. Every Supabase Backend as a Service lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Supabase Backend as a Service