How to Get Download URL from Firebase Storage

To get a download URL from Firebase Storage, use the getDownloadURL() method on a storage reference pointing to your file. This method returns a promise that resolves with the URL you can use to download or share the file.

Syntax

The basic syntax to get a download URL from Firebase Storage is:

• storageRef: A reference to the file in Firebase Storage.
• getDownloadURL(storageRef): A function that returns a promise resolving to the file's download URL.

javascript

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

const storage = getStorage();
const storageRef = ref(storage, 'path/to/your/file.jpg');

getDownloadURL(storageRef)
  .then((url) => {
    // Use the download URL here
    console.log(url);
  })
  .catch((error) => {
    // Handle any errors
    console.error(error);
  });

Output

https://firebasestorage.googleapis.com/v0/b/your-app.appspot.com/o/path%2Fto%2Fyour%2Ffile.jpg?alt=media&token=some-token

Example

This example shows how to get the download URL of an image stored in Firebase Storage and log it to the console.

javascript

import { initializeApp } from "firebase/app";
import { getStorage, ref, getDownloadURL } from "firebase/storage";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

// Reference to the file
const fileRef = ref(storage, 'images/example.jpg');

// Get download URL
getDownloadURL(fileRef)
  .then((url) => {
    console.log('Download URL:', url);
  })
  .catch((error) => {
    console.error('Error getting download URL:', error);
  });

Output

Download URL: https://firebasestorage.googleapis.com/v0/b/YOUR_STORAGE_BUCKET/o/images%2Fexample.jpg?alt=media&token=some-token

Common Pitfalls

Common mistakes when getting download URLs include:

• Using an incorrect or non-existing file path in the storage reference.
• Not initializing Firebase app before accessing storage.
• Ignoring errors from getDownloadURL(), such as permission denied or file not found.
• Trying to get the URL without proper Firebase Storage security rules allowing read access.

javascript

/* Wrong: Using wrong path */
const wrongRef = ref(storage, 'wrong/path/file.jpg');
getDownloadURL(wrongRef)
  .catch(error => console.error('File not found error:', error));

/* Right: Use correct path and handle errors */
const correctRef = ref(storage, 'images/example.jpg');
getDownloadURL(correctRef)
  .then(url => console.log('URL:', url))
  .catch(error => console.error('Error:', error));

Output

File not found error: [Error: Firebase Storage: Object does not exist.]

Quick Reference

Tips for getting download URLs from Firebase Storage:

• Always initialize Firebase app before using storage.
• Use ref(storage, 'path/to/file') to create a reference.
• Call getDownloadURL() on the reference to get the URL.
• Handle errors to catch missing files or permission issues.
• Ensure your Firebase Storage rules allow read access for the user.

Key Takeaways

Use getDownloadURL() on a storage reference to get the file's download URL.

Always handle errors to catch missing files or permission problems.

Make sure Firebase app is initialized before accessing storage.

Verify your Firebase Storage security rules allow read access.

Use the exact file path in the storage reference to avoid errors.