How to generate image URL from file in Firebase Storage and then send said URL to Firestore Database?

Javier_Leon · August 12, 2021, 11:36pm

Hello everyone,

I am currently making an app in which the user uploads an image and some data so that it can later be seen by the other users.

I am using Firebase in order to store this data. I have been able to upload the image to Firebase Storage via Firebase Storage Upload Files, but I have no idea how to generate an image URL for every file and then upload said URL to my Firestore Database.

I tried using the Firebase Storage get download URL flow function but even though the download URL is generated I have been unable to access it, store it in a variable to send it to my Database; even if I could, it is my understanding that this download URL is temporary, meaning that I have to find a way to generate a permanent URL.

It would be greatly appreciated if anyone could explain to me how to generate an URL each time the user uploads an image and then send said URL to my Database.

Mazen_Al-Sakkaf · August 13, 2021, 8:46am

Hi,
You could generate a random UUID and append it to the URL. Just use GENERATE_UUID()

Could you please explain how you did get it right. I have been trying many times to upload files via Firebase Storage Upload Files node with no success.

Thank you

Jardel_Bezerra · August 13, 2021, 3:24pm

I would like to learn how too!!!
I’ve racked my brain trying and couldn’t.

Javier_Leon · August 13, 2021, 6:21pm

Hello,

in order to upload my files to Firebase Storage first I had to link my DB to AppGyver as in Google Firebase connector - Composer. It was quite the tedious process, but now that it’s done and I have my problem figured out, it works like a charm!

As for how I exactly uploaded the file to Storage, I came up with the following logic:

Add Pick Files flow function.
Store the output of Pick Files into a variable (takenPhoto) of type LIST OF ANY VALUES.
Use Firebase Storage upload files flow function. Input is takenPhoto variable.

You can ignore the rest, which is my logic for storing the image URL into a page variable of type web URL and then updating my data variable accordingly.

I’m sorry for answering this late. I’d love to help you if you need any more help, as I had this problem myself not too long ago.

Javier_Leon · August 13, 2021, 6:58pm

Hello,

I have since been able to solve the problem. It was surprisingly simple!

When you upload an image file to Firebase Storage via Firebase Storage upload files, you can then access the Database and if you click said file, you will be able to see a field called NAME, which includes a hyperlink for your image, as in:

Every one of these follows the same pattern:

“https://firebasestorage.googleapis.com/v0/b/[NAME OF THE DATABASE].appspot.com/o/[NAME OF THE FILE]?alt=media”.

So:

Store the constant part of your link in a variable.
Replace DATABASE_NAME with the name of your database.
Concatenate the name of your file (outputs[“Pick Files”].files[0].name) in an AppGyver page variable, or directly into a data variable, as in:

Disregard the warnings.

Alternatively, you could try out Mazen’s solution, which is very similar to mine.

Mazen_Al-Sakkaf · August 13, 2021, 9:32pm

Many thanks Javier,

It works fine with the Pick Files node; however, when I use Take Photo or Pick Image from Library nodes, it does not work.

Any idea how to make it upload files from those nodes.

Much appreciated.

JOHN_WORSHAM · August 14, 2021, 7:34pm

Its just the Output of those nodes .name, without the [0] array index.

Mazen_Al-Sakkaf · August 14, 2021, 7:44pm

Hi John,

I have tried many times with no success. This is the logic I am using:

Any idea what I have done wrong.

Mazen_Al-Sakkaf · August 15, 2021, 1:06pm

Hi,
I have figured it out at last

It is because mimeType field is not set to image/jpeg when you use Take Photo or Pick Image from Library nodes.

You can have it loaded after compressing the image by setting the formula below for Firebase Storage Upload Files node

All the best

Mazen_Al-Sakkaf · August 16, 2021, 5:07am

Hi Javier,

I have just realized that there is a much simpler way to get the image URL through downloadUrl of the Firebase Storage Upload Files node.

Once you upload the file, make a formula to retrieve the image url such as below:

all the best

Delany_Tavenner · February 7, 2022, 7:23pm

Im still lost on how to do this? Where is the dowloadUrl on the Firebase Storage Upload Files Node?
And then where do you add the formula for retrieval?

Michael_Trisler · April 7, 2022, 11:27pm

What seems to be working for me is –

Click the link under NAME as described above by Javier – it should bring up a new window in the browser with a preview of your image.
Copy the image URL that’s in the bar of the new browser window (should be an https://)
Go to your Firestore Database, create a new string field and paste the image url
In AppGyver go to your Firebase data resource and add the data variable under the property type “Image URL”
Add an image to you app page and bind it to the value of your image URL data variable

Deepika_Jain · October 24, 2022, 11:02pm

Hey I am trying to retrieve the image URL from firebase storage to firestore database. As mentioned above I have understood the formula. But what would be the flow function after “Firebase storage upload files”? And where would this formula come into picture?

Surface_Level · May 31, 2023, 2:56am

This video shows how to upload files to firebase How To Upload Images And Files To Firebase From Appgyver (SAP Build Apps) - YouTube