Upload Files to Firebase Storage - Tutorial

Hello @Mevi

I tried this, a button, on click here is the logic :
Component Tap > Take Photo > Firebase storage upload files
On “Firebase storage upload files”, in files top upload i have this formula : “outputs[“Take photo”].photoFile”
But i can read this : Object type is not assignable to list type
I think that’s where the problem comes from, maybe you need to use a variable list object

So, I get this error : TypeError : files.reduce is not a function

With a “Pick files” function, and this formula on upload : outputs[“Pick files”].files
All is ok

Well, yes this is the problem. Output of the take photo is 1 object. Firebase needs a list. The list can contain a single object.
There are two solutions that come to my mind quickly:

  1. [longer and not nice solution:] In firebase upload files data selector use the binding formula “list of values” add an item and assign its properties individually to the outputs["…"].imageFile.name etc…

  2. [Shorter and maybe better practice solution:] In the same spot instead of “list of values” go to formula and make it like this:

[outputs["Take photo"].imageFile]

I think the second one is the easier. The thing is that it just creates a list with that one response item.

Thank you for your help.

I tried both methods.
With :
[outputs["Take photo"].photoFile]
I get a list of objects with 6 properties, it looks good.

But, i have this error : “Error was throw because all of the file uploads failed”, very strange…

this was working for a while for me, but something must have changed in appgyver, because now it is setting the mimetype to application/json for all images and videos and messing everything up

Yes, the mimeType is causing me a lot of headache as well.

If you need the mimeType for any reason later then use the binding to object with properties or we can go further:

[{name: outputs["Take photo"].imageFile.name, 
path: outputs["Take photo"].imageFile.path, 
size: outputs["Take photo"].imageFile.size, 
createdAt: NOW(), modifiedAt: NOW(), 
mimeType: MIME_TYPE(outputs["Take photo"].imageFile.path)}]

This will throw an error, that mimeType cannot be assigned, but that is not true. This way it usually finds the mimeType, since in most cases path ends with the file extension after the name.
Also Firebase will have all of the properties it needs.
This should work.
I have this setup in an app, that I have been working on in the past days and it works for me. Let me know if You encounter any errors.

Hi :wave:, I have a concern about firebase upload component, it’s working on web app but in appgyver emulator for Android the flows send error file upload fails. Could it work on native APK or I should review the flow? Maybe something related to emulator permission for path folders… Or should try API rest solution above mentioned. Thanks

Hello @Mevi could you please do a video like this No-code Power-up: Upload Files /w AppGyver - YouTube but for those who use Firebase and not Amazon S3? Or you could just do a short tutorial here (in a single post) how to upload files from the app to Firebase and then display it in the app. I have followed directions here but I can’t seem to figure out what I’m doing wrong.
Thank you so much.

1 Like

I confirm, without mimeType it works much better, thak you very much !

1 Like

Hello @Alexandre_Bonno, please teach me how to upload images from the app to Firebase.
I can GET and POST records through HTTP Requests (REST API Direct Integration) but confused how to upload images.
Imagine I am five years old; I have just started a new app project; I have just created the first blank page; I have no data resource or variables, nothing! Please walk me through how to upload an image from the app to Firebase. You will be helping me and many more people who have the same problem.
Thank you so much.

Firstly, in your list of pages, in “Global Canvas”, in “Add logic” you need to add after the “App Lauched” event the “Initialize Firebase” item followed by “Auth” to authenticate to Firebase and you set the parameters to connect.

Then, on your blank page, you place a button, on this button, add this logic:
“Component Tap” > “Take photo” > “Firebase Storage Upload files”.
On this last element, in the input Files to upload you select “List of values” > “Add values”, and for each variable, when you click on the field to bind the values, you select “Output value of another node” > “Take Photo” and you select the field to bind.
If you don’t need mimeType, you don’t need to bind it because it doesn’t work for me.
I hope this will help you

1 Like

Thank you, thank you.
The preview app is now responding like it’s actually taking pictures when ‘Capture’ is clicked (it wasn’t before) but no pictures have appeared in my Firebase storage yet. I suspect the problem may be from my Data Resource setup.
In the API setting, do I use the same base url and path I used when setting up my GET/POST requests? I see my projectID.appspot.com in the storage but I don’t know how to use it if it’s what I need in my base url to set up the API. I don’t know if you can post a sample URL so I’d replace necessary parts with those of my project.
Thank you so much for your time.

Hello - In my app I am trying to upload to firebase storage an audio file which has already been recorded by a user in the app i’m building and will be on the device.

Following the @JOHN_WORSHAM tutorial here Upload Files to Firebase Storage - Tutorial - as an initial concept, and I can successfully get that working using the Pick Files component to manually select a file on device and then using Upload Files component to post and save in the bucket.

Now, what I want to do is, instead of having the user need to ‘manually select’ the file using the file picker dialog… since I already have the path to the file I want to upload stored in a page text variable, I am trying to set the uploadUrl property in an Object for the local file in my List of Objects page variable similar to john’s tutorial.

In attempting to troubleshoot and pair it back to the most basic point where I am stuck is :

  1. I have a page variable (text) named audioFilePath with the location of the local file I want to be uploaded
  2. On my button I am setting a page variable (a list of objects) named fileListObject to be empty []
  3. next I think I want to set a page variable for that fileListObject with a reference to the file that is on my device for which I know the path and set the uploadUrl… something like this
    WITH_ITEM(pageVars.fileListObj, SET_KEY(<not sure what to use here>, "uploadUrl", "this will be my firebase path" ))
  • to troubleshoot further, I’ve also tried to use SET_KEY(pageVars.fileListObj[0], "uploadUrl", "hello world") … to see if I can set a property of that object to anything just to see if I’m doing this right…
  1. lastly I am trying to pop an alert to display the pageVars.fileListObj[0].uploadUrl property of the object in the list to make sure that it is actually set - and this is where I am stuck, it’s just empty

I have found the url I’m looking for. It’s https://firebasestorage.googleapis.com/v0/b/[bucket]/o/[file]?alt=media&token=[token]. I replaced the parts relevant to my app and the image I uploaded manually to my Firebase storage now shows in the browser but if I put the same url in the REST API direct integration resource and run test, it says ‘Error: TypeError: Failed to fetch. Does the server allow CORS?status: undefined’.
I need help.
Thank you.

I can now upload files. @Alexandre_Bonno thank you so much. Had to change the rules to
service firebase.storage {
3
match /b/{bucket}/o {
4
match /{allPaths=**} {
5
allow read, write;
6
}
7
}
8
}
My next adventure is to have the uploaded files show on the page.

I am using the same workflow, however, when I try to compress the actual image it throws an unknown error.

Hello @JOHN_WORSHAM Wondering if you can help me. I managed to use the “Firebase Storage upload files” flow by two different methods.

  1. method 1 - Separate buttons for browse and upload.
  2. method 2 - single button for browse and upload.

Both the methods worked like a charm. I tried to replicate the steps in the on different pages of the same app and they didn’t work. I gave different names to the Page Variables but still no luck.

Anyone experienced this before?
Thanks in advance.



@JOHN_WORSHAM
Hi John, don’t worry about this. I managed to trouble shoot it and fixed to get consistent results after a few trial and errors. But i don’t how it worked. I am not software engineer. I am a mechanical engineer :grin:

Thanks
Vikram

2 Likes

Thank you very much for your contribution to the community. In this case I have not been able to get it to work, the “Upload Files” node returns the 1st output but it does not upload the image to Firebase Storage. I tried using “Pick Files” and also “Pick image from library” and the result is always the same. I would appreciate your help since my project depends heavily on being able to load images. Thank you.