Download files with Cloud Storage on Web

Cloud Storage for Firebase allows you to quickly and easily download files from a Cloud Storage bucket provided and managed by Firebase.

Create a Reference

To download a file, first create a Cloud Storage reference to the file you want to download.

You can create a reference by appending child paths to the root of your Cloud Storage bucket, or you can create a reference from an existing gs:// or https:// URL referencing an object in Cloud Storage .

Web

 import 
  
 { 
  
 getStorage 
 , 
  
 ref 
  
 } 
  
 from 
  
 "firebase/storage" 
 ; 
 // Create a reference with an initial file path and name 
 const 
  
 storage 
  
 = 
  
 getStorage 
 (); 
 const 
  
 pathReference 
  
 = 
  
 ref 
 ( 
 storage 
 , 
  
 'images/stars.jpg' 
 ); 
 // Create a reference from a Google Cloud Storage URI 
 const 
  
 gsReference 
  
 = 
  
 ref 
 ( 
 storage 
 , 
  
 'gs://bucket/images/stars.jpg' 
 ); 
 // Create a reference from an HTTPS URL 
 // Note that in the URL, characters are URL escaped! 
 const 
  
 httpsReference 
  
 = 
  
 ref 
 ( 
 storage 
 , 
  
 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg' 
 ); 
  
   storage_download_create_ref 
 . 
 js

Web

 // Create a reference with an initial file path and name 
 var 
  
 storage 
  
 = 
  
 firebase 
 . 
 storage 
 (); 
 var 
  
 pathReference 
  
 = 
  
 storage 
 . 
 ref 
 ( 
 'images/stars.jpg' 
 ); 
 // Create a reference from a Google Cloud Storage URI 
 var 
  
 gsReference 
  
 = 
  
 storage 
 . 
 refFromURL 
 ( 
 'gs://bucket/images/stars.jpg' 
 ); 
 // Create a reference from an HTTPS URL 
 // Note that in the URL, characters are URL escaped! 
 var 
  
 httpsReference 
  
 = 
  
 storage 
 . 
 refFromURL 
 ( 
 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg' 
 ); 
  
   download 
 - 
 files 
 . 
 js

Download Data via URL

You can get the download URL for a file by calling the getDownloadURL() method on a Cloud Storage reference.

Web

 import 
  
 { 
  
 getStorage 
 , 
  
 ref 
 , 
  
 getDownloadURL 
  
 } 
  
 from 
  
 "firebase/storage" 
 ; 
 const 
  
 storage 
  
 = 
  
 getStorage 
 (); 
 getDownloadURL 
 ( 
 ref 
 ( 
 storage 
 , 
  
 'images/stars.jpg' 
 )) 
  
 . 
 then 
 (( 
 url 
 ) 
  
 = 
>  
 { 
  
 // `url` is the download URL for 'images/stars.jpg' 
  
 // This can be downloaded directly: 
  
 const 
  
 xhr 
  
 = 
  
 new 
  
 XMLHttpRequest 
 (); 
  
 xhr 
 . 
 responseType 
  
 = 
  
 'blob' 
 ; 
  
 xhr 
 . 
 onload 
  
 = 
  
 ( 
 event 
 ) 
  
 = 
>  
 { 
  
 const 
  
 blob 
  
 = 
  
 xhr 
 . 
 response 
 ; 
  
 }; 
  
 xhr 
 . 
 open 
 ( 
 'GET' 
 , 
  
 url 
 ); 
  
 xhr 
 . 
 send 
 (); 
  
 // Or inserted into an <img> element 
  
 const 
  
 img 
  
 = 
  
 document 
 . 
 getElementById 
 ( 
 'myimg' 
 ); 
  
 img 
 . 
 setAttribute 
 ( 
 'src' 
 , 
  
 url 
 ); 
  
 }) 
  
 . 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle any errors 
  
 }); 
   storage_download_via_url 
 . 
 js

Web

 storageRef 
 . 
 child 
 ( 
 'images/stars.jpg' 
 ). 
 getDownloadURL 
 () 
  
 . 
 then 
 (( 
 url 
 ) 
  
 = 
>  
 { 
  
 // `url` is the download URL for 'images/stars.jpg' 
  
 // This can be downloaded directly: 
  
 var 
  
 xhr 
  
 = 
  
 new 
  
 XMLHttpRequest 
 (); 
  
 xhr 
 . 
 responseType 
  
 = 
  
 'blob' 
 ; 
  
 xhr 
 . 
 onload 
  
 = 
  
 ( 
 event 
 ) 
  
 = 
>  
 { 
  
 var 
  
 blob 
  
 = 
  
 xhr 
 . 
 response 
 ; 
  
 }; 
  
 xhr 
 . 
 open 
 ( 
 'GET' 
 , 
  
 url 
 ); 
  
 xhr 
 . 
 send 
 (); 
  
 // Or inserted into an <img> element 
  
 var 
  
 img 
  
 = 
  
 document 
 . 
 getElementById 
 ( 
 'myimg' 
 ); 
  
 img 
 . 
 setAttribute 
 ( 
 'src' 
 , 
  
 url 
 ); 
  
 }) 
  
 . 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // Handle any errors 
  
 }); 
   download 
 - 
 files 
 . 
 js

Download Data Directly from the SDK

From version 9.5 and higher, the SDK provides these functions for direct download:

Using these functions, you can bypass downloading from a URL, and instead return data in your code. This allows for finer-grained access control via Firebase Security Rules .

CORS Configuration

To download data directly in the browser, you must configure your Cloud Storage bucket for cross-origin access (CORS). This can be done with the gsutil command line tool, which you can install from here .

If you don't want any domain-based restrictions (the most common scenario), copy this JSON to a file named cors.json :

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Run gsutil cors set cors.json gs://<your-cloud-storage-bucket> to deploy these restrictions.

For more information, refer to the Google Cloud Storage documentation .

Handle Errors

There are a number of reasons why errors may occur on download, 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.

Full Example

A full example of a download with error handling is shown below:

Web

 import 
  
 { 
  
 getStorage 
 , 
  
 ref 
 , 
  
 getDownloadURL 
  
 } 
  
 from 
  
 "firebase/storage" 
 ; 
 // Create a reference to the file we want to download 
 const 
  
 storage 
  
 = 
  
 getStorage 
 (); 
 const 
  
 starsRef 
  
 = 
  
 ref 
 ( 
 storage 
 , 
  
 'images/stars.jpg' 
 ); 
 // Get the download URL 
 getDownloadURL 
 ( 
 starsRef 
 ) 
  
 . 
 then 
 (( 
 url 
 ) 
  
 = 
>  
 { 
  
 // Insert url into an <img> tag to "download" 
  
 }) 
  
 . 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // A full list of error codes is available at 
  
 // https://firebase.google.com/docs/storage/web/handle-errors 
  
 switch 
  
 ( 
 error 
 . 
 code 
 ) 
  
 { 
  
 case 
  
 'storage/object-not-found' 
 : 
  
 // File doesn't exist 
  
 break 
 ; 
  
 case 
  
 'storage/unauthorized' 
 : 
  
 // User doesn't have permission to access the object 
  
 break 
 ; 
  
 case 
  
 'storage/canceled' 
 : 
  
 // User canceled the upload 
  
 break 
 ; 
  
 // ... 
  
 case 
  
 'storage/unknown' 
 : 
  
 // Unknown error occurred, inspect the server response 
  
 break 
 ; 
  
 } 
  
 }); 
   storage_download_full_example 
 . 
 js

Web

 // Create a reference to the file we want to download 
 var 
  
 starsRef 
  
 = 
  
 storageRef 
 . 
 child 
 ( 
 'images/stars.jpg' 
 ); 
 // Get the download URL 
 starsRef 
 . 
 getDownloadURL 
 () 
 . 
 then 
 (( 
 url 
 ) 
  
 = 
>  
 { 
  
 // Insert url into an <img> tag to "download" 
 }) 
 . 
 catch 
 (( 
 error 
 ) 
  
 = 
>  
 { 
  
 // A full list of error codes is available at 
  
 // https://firebase.google.com/docs/storage/web/handle-errors 
  
 switch 
  
 ( 
 error 
 . 
 code 
 ) 
  
 { 
  
 case 
  
 'storage/object-not-found' 
 : 
  
 // File doesn't exist 
  
 break 
 ; 
  
 case 
  
 'storage/unauthorized' 
 : 
  
 // User doesn't have permission to access the object 
  
 break 
 ; 
  
 case 
  
 'storage/canceled' 
 : 
  
 // User canceled the upload 
  
 break 
 ; 
  
 // ... 
  
 case 
  
 'storage/unknown' 
 : 
  
 // Unknown error occurred, inspect the server response 
  
 break 
 ; 
  
 } 
 }); 
   download 
 - 
 files 
 . 
 js

You can also get or update metadata for files that are stored in Cloud Storage .