Getting a Download URL

Relax. We'll talk through this in plain words — no textbook voice.

Getting a Download URL

If you want to display an uploaded file in the browser, you need to fetch its download URL. This comes in handy for image previews, avatar displays, and downloadable file links.

Code Example

javascript

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

const storage = getStorage();

async function getAvatarUrl(userId, fileName) {
  const fileRef = ref(storage, 'avatars/' + userId + '/' + fileName);
  const url = await getDownloadURL(fileRef);

  console.log('Download URL:', url);
  return url;
}

Expected usage

You can drop the resulting URL straight into <img src="url"> to show the image, or save it in Firestore as avatarUrl.

Heads up

A download URL can include a token that effectively makes it publicly shareable. For private files, think carefully about your access design.