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

Need a 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

Need a 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

Need a 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

Need a hint?

Simply call the function by its name followed by parentheses.