Download URLs in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get a download URL from Firebase Storage.

Firebase

const storageRef = firebase.storage().ref('files/example.txt');
storageRef.[1]().then(url => {
  console.log(url);
});

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

AgetURL

BdownloadURL

CfetchURL

DgetDownloadURL

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name that does not exist like 'downloadURL' or 'getURL'.

Trying to access the URL directly without calling a method.

The getDownloadURL() method retrieves the download URL for a file in Firebase Storage.

2fill in blank

medium

Complete the code to create a reference to a file named 'image.png' in Firebase Storage.

Firebase

const storage = firebase.storage();
const imageRef = storage.ref().[1]('images/image.png');

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

ArefChild

BgetChild

Cchild

Dfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'getChild' or 'refChild'.

Trying to pass the path directly to ref() without child().

The child() method creates a reference to a file or folder inside a Firebase Storage reference.

3fill in blank

hard

Fix the error in the code to correctly get the download URL for 'docs/manual.pdf'.

Firebase

const ref = firebase.storage().ref('docs/manual.pdf');
ref.[1]().then(url => {
  console.log(url);
});

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

AgetDownloadURL

BdownloadURL

CfetchDownloadURL

DgetURL

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'downloadURL' which is not a method.

Trying to use 'getURL' or 'fetchDownloadURL' which do not exist.

The correct method to get a download URL is getDownloadURL(). Other options are invalid.

4fill in blank

hard

Fill both blanks to create a reference and get the download URL for 'videos/clip.mp4'.

Firebase

const storage = firebase.storage();
const videoRef = storage.[1]().[2]('videos/clip.mp4');

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

Aref

Bchild

CgetDownloadURL

DstorageRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'storageRef' which is not a method.

Using 'getDownloadURL' in place of 'child' which is incorrect here.

First, use ref() to get the root reference, then child() to point to the file path.

5fill in blank

hard

Fill all three blanks to get the download URL for 'music/song.mp3' and log it.

Firebase

const storage = firebase.storage();
const songRef = storage.[1]().[2]('music/song.mp3');
songRef.[3]().then(url => console.log(url));

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

Aref

Bchild

CgetDownloadURL

Ddownload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'download' instead of 'getDownloadURL'.

Skipping 'child()' and passing path directly to 'ref()' without chaining.

Use ref() to get root, child() for file path, and getDownloadURL() to get the URL.

Practice

1. What does the getDownloadURL() method in Firebase Storage do?

easy

A. It deletes a file from Firebase Storage.

B. It returns a public URL to access the stored file.

C. It uploads a file to Firebase Storage.

D. It lists all files in a storage bucket.

Solution

1. Step 1: Understand the purpose of getDownloadURL()

   This method is used to get a URL that anyone can use to download or view the file stored in Firebase Storage.

2. Step 2: Compare with other storage actions

   Uploading, deleting, or listing files are different methods. getDownloadURL() specifically returns the file's public URL.

3. Final Answer:

   It returns a public URL to access the stored file. -> Option B

4. Quick Check:

   getDownloadURL() = public file URL [OK]

Hint: Remember: getDownloadURL() gives you the file's public link [OK]

Common Mistakes:

• Confusing getDownloadURL() with upload or delete methods
• Thinking it lists files instead of returning a URL
• Assuming it modifies the file instead of providing access

2. Which of the following is the correct syntax to get a download URL for a file reference fileRef in Firebase Storage?

easy

A. const url = fileRef.getDownloadURL();

B. const url = getDownloadURL(fileRef);

C. const url = await getDownloadURL(fileRef);

D. const url = fileRef.downloadURL();

Solution

1. Step 1: Recognize that getDownloadURL returns a Promise

   Since getDownloadURL() is asynchronous, you must use await or .then() to get the URL.

2. Step 2: Check correct usage with file reference

   The correct usage is calling getDownloadURL(fileRef) as a function with the file reference passed in, and awaiting the result.

3. Final Answer:

   const url = await getDownloadURL(fileRef); -> Option C

4. Quick Check:

   Use await with getDownloadURL(fileRef) [OK]

Hint: Use await with getDownloadURL(fileRef) to get URL [OK]

Common Mistakes:

• Calling getDownloadURL as a method on fileRef without await
• Forgetting to await the Promise
• Using incorrect method names like downloadURL()

3. What will the following code output if the file exists and permissions allow access?

import { getDownloadURL } from 'firebase/storage';

async function showURL(fileRef) {
  try {
    const url = await getDownloadURL(fileRef);
    console.log(url);
  } catch (error) {
    console.log('Error:', error.message);
  }
}

medium

A. It logs undefined.

B. It logs 'Error: File not found'.

C. It logs 'Error: Permission denied'.

D. It logs the public download URL of the file.

Solution

1. Step 1: Understand the try block with getDownloadURL

   If the file exists and permissions are correct, getDownloadURL resolves with the URL string.

2. Step 2: Analyze the catch block usage

   The catch block only runs if there is an error like missing file or denied permission, which is not the case here.

3. Final Answer:

   It logs the public download URL of the file. -> Option D

4. Quick Check:

   File exists + permission OK = logs URL [OK]

Hint: Try block logs URL if file exists and accessible [OK]

Common Mistakes:

• Assuming error logs even when file is accessible
• Confusing error messages with success output
• Ignoring async/await behavior

4. Given this code snippet, what is the main issue that will cause an error?

const url = getDownloadURL(fileRef);
console.log(url);

medium

A. getDownloadURL returns a Promise, so url is not the actual URL string.

B. fileRef is not defined.

C. getDownloadURL is not imported.

D. console.log cannot print URLs.

Solution

1. Step 1: Identify getDownloadURL return type

   getDownloadURL() returns a Promise, not the URL string directly.

2. Step 2: Understand why console.log prints a Promise

   Without awaiting or using .then(), url holds a Promise object, so console.log prints the Promise, not the URL.

3. Final Answer:

   getDownloadURL returns a Promise, so url is not the actual URL string. -> Option A

4. Quick Check:

   Missing await means url is Promise, not string [OK]

Hint: Always await getDownloadURL to get the URL string [OK]

Common Mistakes:

• Forgetting that getDownloadURL returns a Promise
• Assuming console.log prints resolved Promise value
• Ignoring async/await syntax requirements

5. You want to display an image from Firebase Storage in your web app using its download URL. Which approach correctly handles errors if the file is missing or access is denied?

import { getDownloadURL } from 'firebase/storage';

async function displayImage(fileRef) {
  try {
    const url = await getDownloadURL(fileRef);
    document.getElementById('img').src = url;
  } catch (error) {
    document.getElementById('img').alt = 'Image not available';
  }
}

hard

A. This code correctly sets the image source or alt text on error.

B. This code will crash because getDownloadURL is synchronous.

C. This code does not handle errors and will leave the image blank.

D. This code sets the image source before getting the URL.

Solution

1. Step 1: Check async/await usage with getDownloadURL

   The code correctly awaits the download URL before setting the image source.

2. Step 2: Verify error handling in catch block

   If an error occurs (file missing or permission denied), the catch block sets the alt text to inform users the image is unavailable.

3. Final Answer:

   This code correctly sets the image source or alt text on error. -> Option A

4. Quick Check:

   Await + try/catch = proper URL loading and error handling [OK]

Hint: Use try/catch with await getDownloadURL to handle errors [OK]

Common Mistakes:

• Not awaiting getDownloadURL causing undefined src
• Ignoring error handling leaving broken images
• Setting image src before URL is available