File metadata in Firebase - Mini Project: Build & Apply

File metadata

📖 Scenario: You are managing files in a Firebase Storage bucket for a photo sharing app. You want to add and update metadata for files to store information like content type and custom tags.

🎯 Goal: Build a Firebase Storage metadata configuration for a file, including setting content type and custom metadata tags.

📋 What You'll Learn

Create a reference to a file in Firebase Storage

Define metadata with content type and custom tags

Update the file metadata using Firebase Storage API

Confirm the metadata update configuration is complete

💡 Why This Matters

🌍 Real World

Managing file metadata is essential for organizing and retrieving files efficiently in cloud storage, such as tagging images with uploader info or content type.

💼 Career

Understanding how to set and update file metadata in Firebase Storage is a common task for cloud developers working on apps that handle user files and media.

1

Create a Firebase Storage file reference

Create a variable called storage that initializes Firebase Storage using getStorage(). Then create a variable called fileRef that references the file path images/photo.jpg using ref(storage, 'images/photo.jpg').

Firebase

# Your code here

Hint

Use getStorage() to get the storage instance and ref() to create a file reference.

2

Define metadata with content type and custom tags

Create a constant called metadata as an object with contentType set to 'image/jpeg' and a customMetadata object containing uploadedBy set to 'user123'.

Firebase

import { getStorage, ref } from 'firebase/storage';

const storage = getStorage();
const fileRef = ref(storage, 'images/photo.jpg');

// Your code here

Hint

Metadata is an object with contentType and customMetadata properties.

3

Update the file metadata using Firebase Storage API

Write an async function called updateFileMetadata that calls updateMetadata(fileRef, metadata) and awaits its result. Store the result in a variable called updatedMetadata.

Firebase

import { getStorage, ref, updateMetadata } from 'firebase/storage';

const storage = getStorage();
const fileRef = ref(storage, 'images/photo.jpg');

const metadata = {
  contentType: 'image/jpeg',
  customMetadata: {
    uploadedBy: 'user123'
  }
};

// Your code here

Hint

Use async function and await the updateMetadata call.

4

Complete the metadata update by calling the function

Call the updateFileMetadata() function to perform the metadata update.

Firebase

import { getStorage, ref, updateMetadata } from 'firebase/storage';

const storage = getStorage();
const fileRef = ref(storage, 'images/photo.jpg');

const metadata = {
  contentType: 'image/jpeg',
  customMetadata: {
    uploadedBy: 'user123'
  }
};

async function updateFileMetadata() {
  const updatedMetadata = await updateMetadata(fileRef, metadata);
}

// Your code here

Hint

Simply call the function by its name followed by parentheses.

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