Upload Files to Firebase Storage - Tutorial

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?

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
Capture4

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)

6 Likes

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

1 Like

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!

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.

From what i said above:

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.

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.

***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?

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

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

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

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

1 Like

Thanks, John, but as I’ve discovered this weekend, the Backendless method is quite different, after all. @Symmetric_Dynamite seems to have come through once again on how to upload imagery from the library to Backendless in this thread – just in case anyone else is ripping apart the AG forums looking for a solution:

1 Like

You had me confused because this thread is a Firebase tutorial thread. So I assumed you needed help with Firebase.

I knew that a Firebase solution wasn’t going to cut it, but I was hoping to adapt it to fit Backendless – that at least up to a certain point, the same method might apply. Unfortunately, it didn’t. All the same, thank you for your time. Should we switch to Firebase in the final product, undoubtedly, this thread will prove very useful to us, as well as to many others.

Take care. :slight_smile:

They are actually solving all this - or simplifying it at least - with the new direct integration, so it looks to be a whole lot easier than having to go through what i did.

1 Like

Hi dominik , this tutorial will work for Backendless - the revised code is at the end:

additionally it works for firebase with a couple of tweaks, thanks to John Worshams posts

1 Like

I’m really hoping so, mate. It is much-needed and about time. There’s so much conflicting information on both forums.

Thanks, @Sim_Sim. I did see this thread. I’m just not the most JS-literate and my eyes were glazing over. :laughing: But I’ll certainly consider it. Thank you.

yeah, good point. Me too, I was hoping to go ‘No-Code’ :rofl:

But you can literally cut and paste that

Also definitely the first thing I would do is get https://www.postman.com/ account set up - you can test the backendless / firebase or whatever with that first . Its not too tricky and once you’ve done it once it will come in handy a load of times whenever you are doing this app dev