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

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.

1 Like

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

2 Likes

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

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:

  1. Add Pick Files flow function.
  2. Store the output of Pick Files into a variable (takenPhoto) of type LIST OF ANY VALUES.
  3. 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.

3 Likes

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:

  1. Store the constant part of your link in a variable.
  2. Replace DATABASE_NAME with the name of your database.
  3. 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.

2 Likes

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.

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

Hi John,

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

image

Any idea what I have done wrong.

Hi,
I have figured it out at last :smiley:

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

1 Like

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:

image

all the best

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?

What seems to be working for me is –

  1. 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.

  2. Copy the image URL that’s in the bar of the new browser window (should be an https://)

  3. Go to your Firestore Database, create a new string field and paste the image url

  4. In AppGyver go to your Firebase data resource and add the data variable under the property type “Image URL”

  5. Add an image to you app page and bind it to the value of your image URL data variable