Upload Files to Firebase Storage - Tutorial

[JOHN_WORSHAM]

I’ve been reading a lot of questions of how to use the Upload Files flow function, and how to make this work with Firebase Storage. So I decided to look into this myself, and after some trial and error, I managed to get this to work with a successful file upload to my Firebase Storage bucket.

This example does not use Authentication. I just set my Storage rules to allow all reads/writes to keep this simple:

Here is how I did it:

First, Create a List of Objects variable. I called mine PAGE_FileListObj:

This example is simple. It just lets the user pick a file from the Pick Files flow function, and uploads this file to Firebase.

Going through each flow function, from start to end:

1. I am just Initializing the FileListObj variable by setting it to empty. This is more tricky than it should be because to do this I have to add an empty value, then remove that value, so it initializes to 0 items. This is necessary i discovered because the WITH_ITEM function we will use below wont work unless the variable is initialized first.

2. Pick Files. Configure this however you want, I set mine to display Images only and Multiple Files = false. So it just allows 1 file to be chosen.

3. Set the FileListObj variable:
   
   

   

Since I am only selecting 1 file from Pick Files, the file index i want is always going to be [0]. So I use a WITH_ITEM function to append {outputs[“Pick files”].files[0]} to my initialized FileListObj variable. But this is wrapped with SET_KEY because I need to set the “uploadUrl” to the Firebase upload destination. So just copy the formula i use above, replacing “myprojectname” with your Firebase project name for the upload Url.

4. Upload Files. Pretty simple. Use ‘Post’ method and the FileListObj variable as ‘Files to upload’.
   

You should get a ‘Complete’ success output. Go to your Firebase Storage console (refresh it) and see your file is there now.

If you get any errors:

1. Double-check your upload URL is correct with the name of your Firebase project with .appspot.com appended to it.
2. Make sure your File List Object variable schema is exactly as the one i showed above (remember size must be ‘number’ type, and uploadUrl must be ‘any text’ type)
3. If necessary, use an Alert function to verify/display that your File List Object variable is complete at index [0].

Note - to display Firebase Storage image files in Appgyver you must add “?alt=media” to the image URL.
For example if your upload Url is:
https://firebasestorage.googleapis.com/v0/b/myprojectname.appspot.com/o/myImage.jpg

Then the URL you would set in your Image component to display this image would be:
https://firebasestorage.googleapis.com/v0/b/myprojectname.appspot.com/o/myImage.jpg?alt=media

Hope this helps.

[Sim_Sim]

thanks @JOHN_WORSHAM

Finally i got it to work with Backendless and literally just posted a help guide too!

I’m going to try this one at the weekend as I want to try firebase (and also S3), this is great thanks!!

So many people have been having problems with File Uploads, so hopefully there has been light shone on this

[Abidales]

vou tentar esse metodo tambem john worsham , e gostei da explicaçao , podia fazer video , eu tenho certeza que eu iria ver.

[Vrinda_Shinde]

Thankyou so much for creating this tutorial. It was really helpful. Can you please tell me how do I add headers to ‘upload files’. I can’t seem to get it right.

[JOHN_WORSHAM]

@Vrinda_Shinde , It looks like its an object, so I imagine the header data should look like this in the formula:

{“key”:“value”, “key2”:“value2”, “key3”:“value3”, etc…}

[Vrinda_Shinde]

@JOHN_WORSHAM I really appreciate your help. It worked . Thank you so much!

[Meu_Porteiro]

Hello @JOHN_WORSHAM,

Awesome tutorial!

I was totally able to upload a picture to firebase, but the process of uploading is taking too long. I need to wait for almost 2 or 3 minutes to upload the picture.

The size of the pictures are around 500kb or 700kb, so it was not supposed to take that long.

How much time are you taking to upload your files?

Did you do something to make this process faster?

How big are your files that you are uploading?

Thanks in advance.

[JOHN_WORSHAM]

You should use the Resize/Compress flow function. That will compress your images down to as little as 4K in some instances.

[Rafael_Santos]

Hi John, I’m trying to use this resize/compress image flow function and it is not working, I think I’m doing something wrong. Do you have any e.g. that you can show here how to use this function?

[JOHN_WORSHAM]

Here is an simple example flow of Resize/Compress Image:

This lets the user pick an image from the image library, then it compresses it, then it stores the compressed file path in a page variable

Here is a typical setting I use to compress the image to 25%. This makes a small image size while keeping decent quality. You can make this value higher for better quality but the file size will be bigger.

Set the Resize/Compress Image Input = Pick Image Output path

Finally set the Page variable = Resize/Compress Image Output path

So now the File Path to the compressed image will be saved in your Page variable to do whatever you want with it, such as upload to a back end, display in your app, or save permanently somewhere (Move/Rename File Directory works here)

[Rafael_Santos]

Hi John, thank you for respond me so quickly and specially per the tutorial, now it worked. I really appreciate it. Have a great Sunday!

[Dominik_Greene]

Hi, @JOHN_WORSHAM. In regards to Post #10 above, that’s exactly what we need to allow our users to upload avatars/background pictures to their profiles. The trouble I’m now having now is where the missing step is there. At what point does the image file “path” convert to an actual image URL which I can then fire to our backend for persistent storage? Is there a conversion logic component I’m missing in the marketplace?

For context, we built in a custom popup to allow users to edit their profiles without having to go into their account settings:

When the indicated Upload New Avatar button is clicked/tapped, it should fire this logic:

The page variable, “varStore_editProfile”, is an object containing the appropriate text fields for the user’s Name, Location, About Me, and Invitation, and then a fifth field for an image URL. Again, I’m not seeing how to convert the image uploaded from the user’s library to an image URL to store in the page variable.

Would greatly appreciate your help!

[Dominik_Greene]

More specifically, the page variable reads as incompatible with filename paths, etc., hence, our issue. Sure, I could set the variable Avatar field to “Any” – already tried – but I’m still not seeing it converting to a storable method for our database.

[JOHN_WORSHAM]

From what i said above:

@JOHN_WORSHAM

to display Firebase Storage image files in Appgyver you must add “?alt=media” to the image URL.
For example if your upload Url is:
https://firebasestorage.googleapis.com/v0/b/myprojectname.appspot.com/o/myImage.jpg

Then the URL you would set in your Image component to display this image would be:
https://firebasestorage.googleapis.com/v0/b/myprojectname.appspot.com/o/myImage.jpg?alt=media

When you set the uploadUrl field in your file object variable (that you use in the Upload Files function) you just add “?alt=media” to the end of that URL. That will be your download URL you want to store and persist.

[JOHN_WORSHAM]

The image download URL is the exact same URL you uploaded to except to view it you have to append “?alt=media” to the end of it.

[Dominik_Greene]

***Realization after the fact: I believe you’re referring to the " Firebase Storage get download URL" logic component in the marketplace? I can try it for Backendless tonight, but I’m not sure if it would at all be compatible.

Original: Thanks for the quick response, John, but this isn’t quite getting through to me. I should’ve clarified, we’re using Backendless at the moment, and actually displaying pictures from our backend is no problem. The example avatar of the woman and flowers is actually pulled into the Preview from our backend. An image URL was just pasted manually into the example user’s profile column for their avatar in Backendless rather than initially uploaded.

To avoid confusion, what we’re trying to do is:

1. The user clicks the Upload New Avatar button.

2. On desktop (a web app), the File Explorer opens and the users double-clicks, say, a JPEG file.

3. That file is pulled into our web app and converted to an image URL which can then be stored as a temporary image URL variable.

4. The user then clicks Save Changes and the web app fires the image URL off to their profile details column in our backend, and the change is reflected immediately on the page. To be clear, we have #4 here figured out. It’s just the converting to a usable URL that we’re having trouble with.

5. Question is, is there a “neutral” method you can think of to generate an image URL without it specifically being related to Firebase?

[JOHN_WORSHAM]

So youre not using Firebase at all to store your image?

[Dominik_Greene]

That is correct, hence, the need for a more general solution if you know of one.

[JOHN_WORSHAM]

@Dominik_Greene

More specifically, the page variable reads as incompatible with filename paths, etc.,

Ok, maybe this will help. I had to assign the fields using formulas instead of direct binding:

[Harri_Sarsa]

Note that this is now possible in a much more integrated way with the freshly released Firebase connector, https://docs.appgyver.com/data/google-firebase