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.