Google is committed to advancing racial equity for Black communities. See how.

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.

// Create a reference with an initial file path and name
var 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('');  

Download Data via URL

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

  .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;
    };'GET', url);

    // Or inserted into an <img> element
    var img = document.getElementById('myimg');
    img.setAttribute('src', url);
  .catch((error) => {
    // Handle any errors

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:

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
.then((url) => {
  // Insert url into an <img> tag to "download"
.catch((error) => {
  // A full list of error codes is available at
  switch (error.code) {
    case 'storage/object-not-found':
      // File doesn't exist
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
    case 'storage/canceled':
      // User canceled the upload

    // ...

    case 'storage/unknown':
      // Unknown error occurred, inspect the server response

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