Use file metadata with Cloud Storage on Web

After uploading a file to Cloud Storage reference, you can also get or update the file metadata, for example to update the content type. Files can also store custom key/value pairs with additional file metadata.

Note: By default, a Cloud Storage for Firebase bucket requires Firebase Authentication to perform any action on the bucket's data or files. You can change your Firebase Security Rules for Cloud Storage to allow unauthenticated access for specific situations. However, for most situations, we strongly recommend restricting access and setting up robust security rules (especially for production apps). Note that if you use Google App Engine and have a default Cloud Storage bucket with a name format of *.appspot.com, you may need to consider how your security rules impact access to App Engine files.

Get File Metadata

File metadata contains common properties such as name, size, and contentType (often referred to as MIME type) in addition to some less common ones like contentDisposition and timeCreated. This metadata can be retrieved from a Cloud Storage reference using the getMetadata() method. getMetadata() returns a Promise containing the complete metadata, or an error if the Promise rejects.

Web

import { getStorage, ref, getMetadata } from "firebase/storage";

// Create a reference to the file whose metadata we want to retrieve
const storage = getStorage();
const forestRef = ref(storage, 'images/forest.jpg');

// Get metadata properties
getMetadata(forestRef)
  .then((metadata) => {
    // Metadata now contains the metadata for 'images/forest.jpg'
  })
  .catch((error) => {
    // Uh-oh, an error occurred!
  });
storage_get_metadata.js

Web

// Create a reference to the file whose metadata we want to retrieve
var forestRef = storageRef.child('images/forest.jpg');

// Get metadata properties
forestRef.getMetadata()
  .then((metadata) => {
    // Metadata now contains the metadata for 'images/forest.jpg'
  })
  .catch((error) => {
    // Uh-oh, an error occurred!
  });
file-metadata.js

Update File Metadata

You can update file metadata at any time after the file upload completes by using the updateMetadata() method. Refer to the full list for more information on what properties can be updated. Only the properties specified in the metadata are updated, all others are left unmodified. updateMetadata() returns a Promise containing the complete metadata, or an error if the Promise rejects.

Web

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

// Create a reference to the file whose metadata we want to change
const storage = getStorage();
const forestRef = ref(storage, 'images/forest.jpg');

// Create file metadata to update
const newMetadata = {
  cacheControl: 'public,max-age=300',
  contentType: 'image/jpeg'
};

// Update metadata properties
updateMetadata(forestRef, newMetadata)
  .then((metadata) => {
    // Updated metadata for 'images/forest.jpg' is returned in the Promise
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });
storage_update_metadata.js

Web

// Create a reference to the file whose metadata we want to change
var forestRef = storageRef.child('images/forest.jpg');

// Create file metadata to update
var newMetadata = {
  cacheControl: 'public,max-age=300',
  contentType: 'image/jpeg'
};

// Update metadata properties
forestRef.updateMetadata(newMetadata)
  .then((metadata) => {
    // Updated metadata for 'images/forest.jpg' is returned in the Promise
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });
file-metadata.js

You can delete a metadata property by setting it to null:

Web

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

const storage = getStorage();
const forestRef = ref(storage, 'images/forest.jpg');

// Create file metadata with property to delete
const deleteMetadata = {
  contentType: null
};

// Delete the metadata property
updateMetadata(forestRef, deleteMetadata)
  .then((metadata) => {
    // metadata.contentType should be null
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });
storage_delete_metadata.js

Web

// Create file metadata with property to delete
var deleteMetadata = {
  contentType: null
};

// Delete the metadata property
forestRef.updateMetadata(deleteMetadata)
  .then((metadata) => {
    // metadata.contentType should be null
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });
file-metadata.js

Handle Errors

There are a number of reasons why errors may occur on getting or updating metadata, including the file not existing, or the user not having permission to access the desired file. More information on errors can be found in the Handle Errors section of the docs.

Custom Metadata

You can specify custom metadata as an object containing String properties.

Web

const metadata = {
  customMetadata: {
    'location': 'Yosemite, CA, USA',
    'activity': 'Hiking'
  }
};
storage_custom_metadata.js

Web

var metadata = {
  customMetadata: {
    'location': 'Yosemite, CA, USA',
    'activity': 'Hiking'
  }
};
file-metadata.js

You can use custom metadata for storing additional app specific data for each file, but we highly recommend using a database (such as the Firebase Realtime Database) to store and synchronize this type of data.

File Metadata Properties

A full list of metadata properties on a file is available below:

Property	Type	Writable
bucket	string	NO
generation	string	NO
metageneration	string	NO
fullPath	string	NO
name	string	NO
size	number	NO
timeCreated	string	NO
updated	string	NO
md5Hash	string	YES on upload, NO on updateMetadata
cacheControl	string	YES
contentDisposition	string	YES
contentEncoding	string	YES
contentLanguage	string	YES
contentType	string	YES
customMetadata	Object containing string->string mappings	YES

Note: at present, setting the md5Hash property on upload doesn't affect the upload, as hash verification is not yet implemented.

Uploading, downloading, and updating files is important, but so is being able to remove them. Let's learn how to delete files from Cloud Storage.