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.

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! 
  
 }); 
  

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! 
  
 }); 
  

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! 
  
 }); 
  

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! 
  
 }); 
  

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! 
  
 }); 
  

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! 
  
 }); 
  

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.

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

Web

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

Web

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

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.

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

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 .

Design a Mobile Site
View Site in Mobile | Classic
Share by: