Generating public URLs in Supabase - Mini Project: Build & Apply

Generating Public URLs with Supabase Storage

📖 Scenario: You are building a simple web app that stores images in Supabase Storage. You want to generate public URLs so anyone can view these images without logging in.

🎯 Goal: Create a Supabase Storage bucket and generate a public URL for an image file stored in that bucket.

📋 What You'll Learn

Create a Supabase Storage bucket named images

Set the bucket to public access

Upload an image file named sample.jpg to the images bucket

Generate a public URL for sample.jpg using Supabase client

💡 Why This Matters

🌍 Real World

Many web apps store user images or files in cloud storage and need to share them publicly. Generating public URLs is a common task to enable this.

💼 Career

Cloud developers and backend engineers often work with storage services like Supabase, AWS S3, or Google Cloud Storage to manage files and generate URLs for frontend use.

1

Create a Supabase Storage bucket named images

Write code to create a Supabase Storage bucket called images with public access enabled. Use the Supabase client variable named supabase and call supabase.storage.createBucket with id set to "images" and public set to true.

Supabase

# Your code here to create a public bucket named 'images'

Hint

Use supabase.storage.createBucket('images', { public: true }) to create the bucket.

2

Upload an image file named sample.jpg to the images bucket

Write code to upload a file named sample.jpg to the images bucket using supabase.storage.from('images').upload. Assume you have a file object called file representing sample.jpg. Use the path sample.jpg for upload.

Supabase

const { data, error } = await supabase.storage.createBucket('images', { public: true });
// Upload 'sample.jpg' file to 'images' bucket
// Your code here

Hint

Use supabase.storage.from('images').upload('sample.jpg', file) to upload the file.

3

Generate a public URL for sample.jpg

Write code to generate a public URL for the file sample.jpg in the images bucket using supabase.storage.from('images').getPublicUrl. Store the URL in a variable named publicUrl.

Supabase

const { data, error } = await supabase.storage.createBucket('images', { public: true });
const { data: uploadData, error: uploadError } = await supabase.storage.from('images').upload('sample.jpg', file);
// Generate public URL for 'sample.jpg'
// Your code here

Hint

Use supabase.storage.from('images').getPublicUrl('sample.jpg') and extract publicUrl.

4

Use the public URL to display the image in HTML

Write an HTML <img> tag that uses the variable publicUrl as the src attribute to display the image. Add an alt attribute with the text Sample Image.

Supabase

const { data, error } = await supabase.storage.createBucket('images', { public: true });
const { data: uploadData, error: uploadError } = await supabase.storage.from('images').upload('sample.jpg', file);
const { data: { publicUrl } } = supabase.storage.from('images').getPublicUrl('sample.jpg');
 tag using publicUrl as src and alt='Sample Image' -->

Hint

Create an <img> tag string using template literals with publicUrl as the source.

Practice

1. What does the getPublicUrl function in Supabase do?

easy

A. It creates a link that anyone can use to access a file in a bucket.

B. It deletes a file from the storage bucket.

C. It uploads a file to the storage bucket.

D. It encrypts a file before storing it.

Solution

1. Step 1: Understand the purpose of getPublicUrl

   This function is designed to generate a URL that can be shared publicly to access a file stored in Supabase storage.

2. Step 2: Compare options with function behavior

   Only It creates a link that anyone can use to access a file in a bucket. describes creating a public link. Other options describe unrelated actions like deleting, uploading, or encrypting files.

3. Final Answer:

   It creates a link that anyone can use to access a file in a bucket. -> Option A

4. Quick Check:

   Public URL = Link to file [OK]

Hint: Public URLs let anyone access files without login [OK]

Common Mistakes:

• Confusing URL generation with file upload
• Thinking it deletes files
• Assuming it encrypts files automatically

2. Which of the following is the correct way to call getPublicUrl in Supabase to get a public URL for a file named photo.jpg in bucket images?

easy

A. supabase.getPublicUrl('images', 'photo.jpg')

B. supabase.storage.getPublicUrl('images/photo.jpg')

C. supabase.storage.from('images').getPublicUrl('photo.jpg')

D. supabase.storage.from('photo.jpg').getPublicUrl('images')

Solution

1. Step 1: Recall the correct method chaining

   The correct syntax is to select the bucket first with from('bucket_name'), then call getPublicUrl('file_path').

2. Step 2: Match options with correct syntax

   supabase.storage.from('images').getPublicUrl('photo.jpg') matches this pattern exactly. Options A, B, and D misuse method calls or argument order.

3. Final Answer:

   supabase.storage.from('images').getPublicUrl('photo.jpg') -> Option C

4. Quick Check:

   Bucket then file path = Correct call [OK]

Hint: Use .from(bucket).getPublicUrl(file) syntax [OK]

Common Mistakes:

• Calling getPublicUrl directly on storage
• Swapping bucket and file arguments
• Using wrong method names

3. What will be the output of this code snippet?

const { data } = supabase.storage.from('docs').getPublicUrl('file.txt');
console.log(data.publicUrl);

medium

A. A boolean indicating if the file exists.

B. A string URL to access 'file.txt' publicly in 'docs' bucket.

C. Undefined because 'data' is not returned by getPublicUrl.

D. An error because getPublicUrl returns a promise.

Solution

1. Step 1: Understand getPublicUrl return value

   The getPublicUrl method returns an object with a publicUrl string property immediately, not a promise.

2. Step 2: Analyze the console.log output

   Logging data.publicUrl will print the URL string to access the file publicly.

3. Final Answer:

   A string URL to access 'file.txt' publicly in 'docs' bucket. -> Option B

4. Quick Check:

   getPublicUrl returns URL string [OK]

Hint: getPublicUrl returns URL object, not a promise [OK]

Common Mistakes:

• Assuming getPublicUrl is async
• Expecting undefined data
• Confusing output with file existence check

4. You tried to generate a public URL with supabase.storage.from('media').getPublicUrl('video.mp4') but got an empty string. What is the most likely cause?

medium

A. getPublicUrl requires an async await call.

B. You forgot to import the Supabase client.

C. The bucket name should be 'videos' not 'media'.

D. The file 'video.mp4' does not exist in the 'media' bucket.

Solution

1. Step 1: Check file existence in bucket

   If the file does not exist, the public URL generated will be empty or invalid.

2. Step 2: Evaluate other options

   Importing client or bucket name mismatch would cause errors, not empty string. getPublicUrl is synchronous, so async is not needed.

3. Final Answer:

   The file 'video.mp4' does not exist in the 'media' bucket. -> Option D

4. Quick Check:

   Missing file = empty URL [OK]

Hint: Empty URL usually means file missing [OK]

Common Mistakes:

• Assuming getPublicUrl is async
• Ignoring file existence
• Mixing up bucket names

5. You want to share a file publicly but keep other files private in the same bucket. Which approach with Supabase storage and getPublicUrl is best?

hard

A. Use getPublicUrl only on files in a public bucket.

B. Set the bucket to private, then generate public URLs only for specific files using getPublicUrl.

C. Make the entire bucket public so all files are accessible.

D. Upload files with a special tag to mark them public.

Solution

1. Step 1: Understand bucket privacy settings

   Supabase storage buckets are either public or private. Public buckets allow all files to be accessed via public URLs.

2. Step 2: Evaluate file-level public access

   Supabase does not support per-file public access in private buckets. To share files publicly, the bucket must be public.

3. Step 3: Choose best practice

   Use getPublicUrl only on files in a public bucket. correctly states to use getPublicUrl on files in a public bucket to share them. Options A and D are incorrect because file-level public control is not supported. Make the entire bucket public so all files are accessible. makes all files public, which is not desired.

4. Final Answer:

   Use getPublicUrl only on files in a public bucket. -> Option A

5. Quick Check:

   Public URLs need public bucket [OK]

Hint: Only public buckets support public URLs per file [OK]

Common Mistakes:

• Thinking private buckets allow public URLs per file
• Making whole bucket public without control
• Assuming tags control public access