Which is right on Firestore to store paths of images uploaded to Firebase Storage, especially with Resize Images?

Question

I'm using Firebase Firestore to store users' thumbnails path and Firebase Storage to store those image files. And recently I started using Resize Images Firebase extension.

I think I have 2 ways to code.

1. Upload images to Storage and save path on Firestore which I can get as download URL completely after uploading.

Firestore structure should look like this.

users
  userId
    name : "John"
    imageUrl : "https://firebasestorage.googleapis.com/{bucket}/{uuid}.jpg?alt=media&token={token}

Good is:

• Easy to load image from url

Bad is:

• Can not use with the extension, which copies small images within Storage but requires another token.

2. Decide a file name first, and store only that name in Firestore.

This practice would be:

users
  userId
    name : "John"
    imageName : "{uuid}"
    ext: "jpeg"

In this case, you have to combine them when creating image view like:

final storageRef = FirebaseStorage.instance.ref();
storageRef.child("users").child("${imageName}.${ext}");
final url = await storageRef.getDownloadURL();
// and make image view with url

I feel it's pretty mess because it awaits users to load images.

But good point on this is:

• Easy to insert suffix like "_200x200" on resized images.
• More secure by requiring users to pass Storage auth.

Does anyone know another best solution which overcomes those 2 options' lacks?

Answer 1

There is no singular "best" solution. It all depends on your use-cases and needs.

That said, having each user call getDownloadURL() to get the exact same URL seems wasteful to me, as it adds an extra call for each of them. I'd typically store the download URL in the database (if the data is considered public), or have them load the data through the SDK (if I want to enforce security rules on access).

---

I only later noticed that you're using the Firebase Extension to resize images. If you want to use download URLs in that case, you can store that in the database either by listening to the custom event that the extension fires after the resize is complete, or you can have the first client that accesses the image generate the download URL and store that in the database.