File metadata in Firebase - Step-by-Step Execution

Process Flow - File metadata

Upload File

↓

Store File in Storage

↓

Attach Metadata

↓

Retrieve Metadata

↓

Use Metadata for Info or Control

This flow shows how a file is uploaded, stored with metadata, and later retrieved to access its metadata.

Execution Sample

Firebase

const fileRef = storageRef.child('images/photo.jpg');
await fileRef.put(file);
await fileRef.updateMetadata({ contentType: 'image/jpeg', customMetadata: { author: 'Alice' } });
const meta = await fileRef.getMetadata();
console.log(meta.contentType, meta.customMetadata.author);

Uploads a file, sets metadata, then retrieves and logs the metadata.

Process Table

Step	Action	Result	Metadata State
1	Create reference to 'images/photo.jpg'	Reference created	{}
2	Upload file to reference	File stored	{}
3	Update metadata with contentType and customMetadata	Metadata updated	{"contentType":"image/jpeg","customMetadata":{"author":"Alice"}}
4	Retrieve metadata from file	Metadata retrieved	{"contentType":"image/jpeg","customMetadata":{"author":"Alice"}}
5	Log contentType and author	Output: image/jpeg Alice	{"contentType":"image/jpeg","customMetadata":{"author":"Alice"}}
6	End	Process complete	{"contentType":"image/jpeg","customMetadata":{"author":"Alice"}}

💡 All steps completed successfully; metadata attached and retrieved.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
fileRef	undefined	Reference to 'images/photo.jpg'	Reference to 'images/photo.jpg'	Reference to 'images/photo.jpg'	Reference to 'images/photo.jpg'	Reference to 'images/photo.jpg'
meta	undefined	undefined	undefined	undefined	{"contentType":"image/jpeg","customMetadata":{"author":"Alice"}}	{"contentType":"image/jpeg","customMetadata":{"author":"Alice"}}

Key Moments - 3 Insights

Why is metadata empty right after uploading the file (Step 2)?

Because uploading the file stores the file content but does not automatically add metadata. Metadata must be set explicitly as shown in Step 3.

Can we retrieve metadata before setting it?

Yes, but it will be empty or default. Metadata is only meaningful after you update it, as shown in Step 4.

What happens if we update metadata multiple times?

Each update replaces or merges metadata. The latest update is what you retrieve, as seen in Step 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the metadata state immediately after uploading the file (Step 2)?

A {}

B {"contentType":"image/jpeg"}

C {"customMetadata":{"author":"Alice"}}

D {"contentType":"image/jpeg","customMetadata":{"author":"Alice"}}

💡 Hint

Check the 'Metadata State' column for Step 2 in the execution table.

At which step is the metadata first updated with contentType and author?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Action' column describing metadata update in the execution table.

If we did not call updateMetadata, what would the metadata be at Step 4?

A {"customMetadata":{"author":"Alice"}}

B {"contentType":"image/jpeg"}

C {}

D undefined

💡 Hint

Refer to the variable_tracker for 'meta' before and after Step 3.

Concept Snapshot

File metadata in Firebase Storage:
- Upload file to storage reference
- Use updateMetadata() to set contentType and customMetadata
- Retrieve metadata with getMetadata()
- Metadata is separate from file content
- Metadata must be explicitly set and can be updated anytime

Full Transcript

This lesson shows how to work with file metadata in Firebase Storage. First, you create a reference to a file path. Then you upload the file content to that reference. After uploading, the file has no metadata by default. You explicitly set metadata like content type and custom fields using updateMetadata(). Later, you retrieve the metadata with getMetadata() to read or use it. Metadata is stored separately from the file content and can be updated multiple times. This helps you store extra information about files, like author or file type, which can be useful for your app.

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