Generating public URLs in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to generate a public URL for a stored file.

Supabase

const { data } = supabase.storage.from('avatars').getPublicUrl([1]);

Drag options to blanks, or click blank then click option'

A'public/profile.png'

B'profile.png'

C'avatars/profile.png'

D'profile/avatar.png'

Attempts:

3 left

💡 Hint

Common Mistakes

Including the bucket name in the file path.

Using incorrect folder names in the path.

The getPublicUrl method requires the file path inside the bucket. Here, the file is named profile.png inside the avatars bucket.

2fill in blank

medium

Complete the code to access the public URL from the response.

Supabase

const publicUrl = data.[1];

Drag options to blanks, or click blank then click option'

Aurl

Blink

Cpublic_url

DpublicUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using snake_case property names.

Trying to access a property that does not exist.

The getPublicUrl method returns an object with a publicUrl property containing the URL string.

3fill in blank

hard

Fix the error in the code to correctly generate a public URL for a file in a folder.

Supabase

const { data } = supabase.storage.from('documents').getPublicUrl([1]);

Drag options to blanks, or click blank then click option'

A'reports/2023.pdf'

B'2023.pdf'

C'documents/reports/2023.pdf'

D'/reports/2023.pdf'

Attempts:

3 left

💡 Hint

Common Mistakes

Including the bucket name in the file path.

Starting the path with a slash.

The file path should be relative to the bucket documents. So include the folder reports and the file name 2023.pdf without repeating the bucket name.

4fill in blank

hard

Fill both blanks to generate a public URL and log it to the console.

Supabase

const { data } = supabase.storage.from('images').[1]([2]);
console.log(data.publicUrl);

Drag options to blanks, or click blank then click option'

AgetPublicUrl

B'photos/sunset.jpg'

C'images/sunset.jpg'

Dlist

Attempts:

3 left

💡 Hint

Common Mistakes

Using the bucket name in the file path.

Using the wrong method name.

Use getPublicUrl method with the relative file path 'photos/sunset.jpg' inside the images bucket.

5fill in blank

hard

Fill all three blanks to generate a public URL for a file and assign it to a variable.

Supabase

const { data } = supabase.storage.from([1]).[2]([3]);
const url = data.publicUrl;

Drag options to blanks, or click blank then click option'

A'avatars'

BgetPublicUrl

C'user123.png'

D'users'

Elist

F'profile/user123.png'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong bucket names.

Using incorrect method names.

Including bucket name in file path.

The bucket is 'avatars', the method is getPublicUrl, and the file path is 'user123.png' inside that bucket.

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