Firebase storage URL keeps changing with new token

Question

I'm trying to build a social media application using firebase database and storage. Below is the flow expected.

1. User upload a profile picture which is stored on firebase storage in the current user folder and the URL stored in firebase database for quick access. (Works fine)

2. User post their thoughts. This save users info such as post message, username and profile image URL in databases. (Works fine).

Problem

The problem now is say a user updates he's or her profile picture, this overrides the older profile image in firebase storage (in order manage storage and to make user image be the same across all comments and post). On the post message activity the older profile image URL can't be accessed cause the token as changed.

Question

I will like to know how this can be fixed in such that the firebase storage URL will be static (that is the same) accross all updates.

NB

Using Picasso and not firebase method to get the images

Answer 1

Although this question had been asked for a very long time, but I noticed some people still find it difficult solving this, so I will be providing my solution below.

STEP 1 Since storage URL are always dynamic (i.e the posses token) when changed, what I did was to use generic name for image file stored say avatar for all users

STEP 2 Create a directory in storage for each user as follows: users/{uid}/avatar.jpg

STEP 3 Pull or display the image by using the path in step 2 (see below)

ANDROID

StorageReference storageReference = FirebaseStorage.getInstance().getReference("users").child(userId).child("avatar.jpg");
    
Glide.with(context).using(new FirebaseImageLoader()).load(storageReference).diskCacheStrategy(DiskCacheStrategy.ALL)
                .error(R.drawable.ch_white_icon).placeholder(R.drawable.ch_white_icon).into(imageView);

WEB

var storage = firebase.storage();
    var pathReference = storage.ref('users/' + userId + '/avatar.jpg');
    pathReference.getDownloadURL().then(function (url) {
        $("#large-avatar").attr('src', url);
    }).catch(function (error) {
        // Handle any errors
    });

With this you don't have to worry with the dynamic link anymore, whenever you upload a new image to the above path, it overrides the previous one and the code in step 3 will give you the new image.

PS: For Android Don't forget to change DiskCacheStrategy.ALL to DiskCacheStrategy.NONE if you don't want glide to cache image or you can use timestamp to get new image if cache is allowed.

Answer 2

Since the URL image is stored in the database, you could use a Cloud Function to update the value after a user has updated his picture.

You can trigger a Cloud function in response to the updating of files in Cloud Storage, see:

https://firebase.google.com/docs/functions/gcp-storage-events

You will find examples of Cloud Functions at: https://github.com/firebase/functions-samples

and the full doc at: https://firebase.google.com/docs/functions/