File metadata in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get a reference to a file in Firebase Storage.

Firebase

const storageRef = firebase.storage().ref().child([1]);

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

A'images/photo.jpg'

Bimages/photo.jpg

CstorageRef

D'storage/images/photo.jpg'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the file path

Using a variable name instead of a string path

The file path must be a string, so it needs quotes around it.

2fill in blank

medium

Complete the code to update the metadata of a file in Firebase Storage.

Firebase

storageRef.updateMetadata({ contentType: [1] })

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

Aimage/png

B'image/png'

C'text/plain'

DcontentType

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the MIME type

Passing the key name instead of the value

Metadata values like contentType must be strings with quotes.

3fill in blank

hard

Fix the error in the code to correctly fetch metadata of a file.

Firebase

storageRef.[1]().then(metadata => { console.log(metadata.contentType); });

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

AreadMetadata

BfetchMetadata

CdownloadMetadata

DgetMetadata

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like fetchMetadata or readMetadata

Trying to access metadata without calling a method

The correct method to get metadata is getMetadata().

4fill in blank

hard

Fill both blanks to set custom metadata and then update it.

Firebase

const newMetadata = { [1]: 'user123', [2]: 'profile' };
storageRef.updateMetadata(newMetadata);

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

AcustomMetadata

BcontentType

CmetadataType

DcustomData

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid keys like 'metadataType'

Confusing contentType with custom metadata keys

Custom metadata keys are placed inside 'customMetadata' or similar keys; here 'customMetadata' and 'customData' are used as keys.

5fill in blank

hard

Fill all three blanks to correctly read, modify, and update file metadata.

Firebase

storageRef.getMetadata().then(metadata => {
  const updatedMetadata = { ...metadata, [1]: [2] };
  return storageRef.[3](updatedMetadata);
});

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

AcontentType

B'application/json'

CupdateMetadata

DsetMetadata

Attempts:

3 left

💡 Hint

Common Mistakes

Using setMetadata() which is not a Firebase Storage method

Forgetting quotes around the MIME type string

We update the 'contentType' to 'application/json' and call updateMetadata() to save changes.

Practice

1. What is the main purpose of file metadata in Firebase Storage?

easy

A. To store extra information about files like type and custom tags

B. To store the actual file content

C. To manage user authentication

D. To create database records

Solution

1. Step 1: Understand what metadata means

   Metadata is data about data, so it holds extra info about files, not the files themselves.

2. Step 2: Identify the role of metadata in Firebase Storage

   Firebase Storage uses metadata to store info like file type and custom tags to help manage files better.

3. Final Answer:

   To store extra information about files like type and custom tags -> Option A

4. Quick Check:

   File metadata = extra info about files [OK]

Hint: Metadata holds info about files, not the files themselves [OK]

Common Mistakes:

• Confusing metadata with file content
• Thinking metadata manages users
• Assuming metadata creates database records

2. Which of the following is the correct way to set custom metadata for a file in Firebase Storage using JavaScript?

easy

A. storageRef.updateMetadata({ customMetadata: { owner: 'user1' } })

B. storageRef.setMetadata({ owner: 'user1' })

C. storageRef.metadata = { owner: 'user1' }

D. storageRef.uploadMetadata({ customMetadata: { owner: 'user1' } })

Solution

1. Step 1: Recall Firebase Storage method for updating metadata

   The correct method to update metadata is updateMetadata(), not setMetadata or uploadMetadata.

2. Step 2: Check the structure for custom metadata

   Custom metadata must be inside a customMetadata object within the metadata parameter.

3. Final Answer:

   storageRef.updateMetadata({ customMetadata: { owner: 'user1' } }) -> Option A

4. Quick Check:

   Use updateMetadata() with customMetadata object [OK]

Hint: Use updateMetadata() with customMetadata key [OK]

Common Mistakes:

• Using setMetadata() which does not exist
• Assigning metadata directly to storageRef
• Using uploadMetadata() which is invalid

3. Given the following code snippet, what will be logged to the console?

const metadata = await storageRef.getMetadata();
console.log(metadata.contentType);

medium

A. The file's download URL

B. The file size in bytes

C. The MIME type of the file, e.g., 'image/png'

D. An error because getMetadata() returns undefined

Solution

1. Step 1: Understand what getMetadata() returns

   getMetadata() returns an object with file metadata including contentType, size, and more.

2. Step 2: Identify what metadata.contentType holds

   contentType holds the MIME type of the file, such as 'image/png' or 'application/pdf'.

3. Final Answer:

   The MIME type of the file, e.g., 'image/png' -> Option C

4. Quick Check:

   metadata.contentType = MIME type [OK]

Hint: contentType in metadata shows file type [OK]

Common Mistakes:

• Thinking contentType is file size
• Expecting download URL from metadata
• Assuming getMetadata() returns undefined

4. You try to update file metadata with this code but get an error:

await storageRef.updateMetadata({ owner: 'user1' });

What is the likely cause?

medium

A. updateMetadata() cannot update metadata

B. storageRef is not defined

C. owner is not a valid metadata field

D. Missing the customMetadata wrapper around owner

Solution

1. Step 1: Check the structure required for custom metadata

   Custom metadata must be inside a customMetadata object, not directly as a field.

2. Step 2: Identify the error cause

   Passing { owner: 'user1' } directly causes an error because owner is not a top-level metadata field.

3. Final Answer:

   Missing the customMetadata wrapper around owner -> Option D

4. Quick Check:

   Custom metadata needs customMetadata key [OK]

Hint: Wrap custom fields inside customMetadata object [OK]

Common Mistakes:

• Passing custom fields directly without customMetadata
• Thinking updateMetadata() can't update metadata
• Ignoring storageRef definition errors

5. You want to tag files uploaded by users with their user ID and file category. Which is the best way to store this info in Firebase Storage metadata?

hard

A. Add user ID and category as top-level metadata fields

B. Use customMetadata with keys 'userId' and 'category' inside updateMetadata()

C. Save user ID and category in Firestore only, not in metadata

D. Store user ID and category in the file name

Solution

1. Step 1: Understand how to store extra info in Firebase Storage

   Firebase Storage supports customMetadata to store extra info like tags.

2. Step 2: Evaluate options for tagging files

   Using customMetadata keys 'userId' and 'category' inside updateMetadata() is the best practice for tagging files.

3. Step 3: Why other options are less ideal

   File names can get messy, Firestore is separate, and top-level metadata fields do not support custom keys.

4. Final Answer:

   Use customMetadata with keys 'userId' and 'category' inside updateMetadata() -> Option B

5. Quick Check:

   Tag files using customMetadata keys [OK]

Hint: Use customMetadata keys for tagging files [OK]

Common Mistakes:

• Putting tags in file names instead of metadata
• Relying only on Firestore for file tags
• Trying to add custom fields as top-level metadata