12
votes

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

2
Did you ever find a solution to this? Dealing with the same problem atmHarry
@Harry Yes, what I did was to use a standard name for profile image in database across all users and on the storage use this name. E.g I use a standard 'avatar.jpg' as avatar name and on storage I used a path uniquely for each user (users/userId/profile/avatar.png). With this whenever a user updates his/her profile picture it will overide the old avatar.png with a new file with the same name avata.png. Hope this help, let me know if you need more clarificationProdigy
could i know your URL string you did in database as a example?HEO JUN HYEOK
@Prodigy I did exactly as you said with the path of the image in the firebase storage but the token in the link still keeps changing. Will you please provide more clarification on how you solved the problem?Mustafa Bhatkar
Sorry for the late response. You don't have to use the full URL (cause it contains dynamic token) no more you can get the image using Firebase Glide (firebaseui) to do that. If you need any clarification or sample code I can help you with that.Prodigy

2 Answers

4
votes

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.

2
votes

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/