Firebase Storage | A Guide for Beginners

Hi Koders,

I observed that many of you have been encountering issues on Firebase Storage so I decided to make a guide for beginners and it may solve some of the issues.

So Lets Get Started

Introduction

Firebase is a service by Google dedicated for back-end services.
One of their services of Firebase is Firebase Storage.
Firebase Storage helps in Storing Files etc.
Firebase Storage is located in Components ~ Google ~ Firebase Storage in Kodular
With Firebase Storage Component you can add files to your Project from your Device.

Blocks

Events

When Firebase Storage .Delete Failed
component_event

  • This is an event triggered when the file has not been deleted.
  • This event may rise when Delete File block is called.
  • When the Delete is failed it is not deleted from Firebase Storage.
  • If you want to delete the File write should be allowed in the Firebase Storage Rules, which we will discuss in this post.
  • This block is the Opposite of Delete Success.

Outputs
File~ The File name which had to deleted but wasn’t deleted ~ Text.
Message ~ The Error message that caused the file not to be deleted ~ Text.

When Firebase Storage .Delete Success
component_event (1)

  • This is an event triggered when the file has been deleted successfully.
  • This event may rise when Delete File block is called.
  • As this is not a Realtime Storage the changes are not updated if the user is viewing the Console. So to Update we should refresh the browser to update the data again.
  • Again, If you want to delete the File write should be allowed in the Firebase Storage Rules, which we will discuss in this post.
  • This block is the Opposite of Delete Failed.

Outputs
File ~ Returns the file name which was deleted successfully ~ Text.

When Firebase Storage .Download Failed
component_event (2)

  • This is an event triggered when the file has not been downloaded.
  • This event may rise when Download File block is called.
  • If you want to Download the File read should be allowed in the Firebase Storage Rules, which we will discuss in this post.
  • This block is the Opposite of Download Success.

Outputs
File~ The File name which had to Downloaded but wasn’t Downloaded ~ Text.
Message ~ The Error message that caused the file to fail to Download ~ Text.

When Firebase Storage .Download Success
component_event (3)

  • This is an event triggered when the file has been downloaded successfully.
  • This event may rise when Download File block is called.
  • Again, If you want to download the File, read should be allowed in the Firebase Storage Rules, which we will discuss in this post.
  • This block is the Opposite of Download Failed.

Outputs
File ~ Returns the name file which was downloaded successfully ~ Text.
Downloaded File ~ Returns the Downloaded File, this File is not its name rather it is a File which can be set ~ Text.

When Firebase Storage .Upload Failed
component_event (4)

  • This is an event triggered when the file could not be uploaded to the console.
  • This event may rise when Upload File block is called.
  • If you want to Upload the File write should be allowed in the Firebase Storage Rules, which we will discuss in this post.
  • This block is the Opposite of Upload Success.

Outputs
File~ The File name which had to uploaded but wasn’t uploaded ~ Text.
Message ~ The Error message that caused the file to fail to upload ~ Text.

When Firebase Storage .Upload Progress
component_event (5)
This is an event triggered when the progress to upload the file changes.
It is not recommended to use this block to get the upload path as it may change or even fails.

As Firebase takes some time to upload, this block comes handy
It helps user to know how much has been uploaded.
Over here we will create a Simple Linear Progress Bar.
To do it set the blocks as below.
blocks (7).
You can also create advanced and beautiful Progresses with the help of extensions and guides.

Outputs
File ~ File name of which the Files is going to be uploaded ~ Text.
Upload Path ~ The Path in Firebase Where it is going to uploaded, Not Accurate ~ Text.
Transferred Bytes ~ The Number of Bytes transferred to Firebase, The Transferred Bytes keep changing ~ Integer.
Total Bytes ~ The Total Bytes of the Image ~ Integer.

When Firebase Storage .Upload Success
component_event (6)

  • This is an event triggered when the file has been uploaded successfully.
  • This event may rise when upload File block is called.
  • Again, If you want to download the File, write should be allowed in the Firebase Storage Rules, which we will discuss in this post.
  • This block is the Opposite of Upload Failed.
  • This Block provides the correct upload path of the Firebase.
  • This Block also gives the Download URL which helps to download the file but to be frank this Download URL is nothing but just the URL which can be accessed to the Web, it means that this is a File URL similar like the Cloudinary Component’s Image URL.

Outputs
File ~ The Name of the File which has been uploaded ~ Text.
Upload Path ~ The Accurate Upload Path in Firebase of the Image ~ Text.
Download URL ~ The File URL and helps in the Download of the file ~ Text.

Call

Coming over to the Call Blocks

Call Firebase Storage .Delete File
component_method (2)

  • This helps to delete the File from the Console Project.
  • You have to Specify the File name including the Format.
  • You can have the File name, when you upload the File to Firebase and get the File Name from the Block Upload Success.
  • :warning: Warning - Deleting a file from here also results is Deleting the File in Console.
  • When this block is raised, any one of the When Firebase Storage .Delete Success and When Firebase Storage .Delete Failed is triggered.

Inputs
File ~ Text ~ File Name with Format.

Call Firebase Storage .Download File
component_method (3)

  • This helps to download a File from the Console.
  • You have to specify the File name including the format, you can get the File Name when you upload the File to Firebase and get the File Name from the Block Upload Success.
  • You also have to specify the folder of the file, nothing complicated, you can get the folder which is the upload path when you upload the File to Firebase and get the Upload Path from the Block Upload Success.
  • When this block is raised, any one of the When Firebase Storage .Download Success and When Firebase Storage .Download Failed is triggered.

Inputs
File ~ Text ~ File Name with Format.
To Folder ~ Text ~ Upload Path.

Call Firebase Storage .Get Bucket
component_method (4)

  • This Block helps to get’s the Bucket name to which Firebase Storage has Registered to.

Set
Set Label Text ~ Call Firebase Storage .Get Bucket
Set = Text

Call Firebase Storage .Pause Downloads
component_method (5)
This helps to pause downloads if the File is Downloading from Console.

Call Firebase Storage .Pause Uploads
component_method (6)
This helps to pause Uploads if the File is Uploading to Console.

Call Firebase Storage .Resume Downloads
component_method (8)
This helps to pause Resume, if the File is paused while downloading from the Console

Call Firebase Storage .Resume Uploads
component_method (7)
This helps to pause Resume, if the File is paused while uploading to the Console.

Call Firebase Storage .Upload File
component_method (9)

  • One of the main Block in Firebase Storage.
  • This Block help to Upload the File to the Console.
  • You have to specify the File not the File Name, The File Can be any, it can be picked from Gallery or it can be capture by the Camera
    *You also have to specify the File Name with format.
  • :warning: Warning giving the same file name and format for the existing File in Console may lead to overwriting we will solve this as we go on in this post.
  • When this block is raised, any one of the When Firebase Storage .Upload Success and When Firebase Storage .Upload Failed is triggered.

As I had promised to help you in avoiding overwriting of file I will do it now, just set the Blocks as bellow whenever you upload a file
blocks (12)
The User may add same name to the File so its better to not take a risk by adding a random Integer
You can add any File Format
Just make sure there is a gap between File Name and Integer to avoid Collision.

Lastly the Component Block
component_component_block
This is just a Component block representing Firebase Database

Creating and Connecting Firebase Storage

Its time create a Firebase Storage for storing the files.
Just Follow the Steps

Step 1
Lets go to Firebase

Step 2
Click on Get Started, if you haven’t logged in to Google Account, you will be redirected to Sign In to Google Account Page else you will be redirected to Firebase Console.
Creating and Connecting our own Database to Firebase

Step 3
Add a Project to the Firebase Console
Creating and Connecting our own Database to Firebase

Step 4
Enter a Project Name and press Continue

Step 5
You can Allow Google Analytics in your Firebase Project

Step 6
You can Select your Default Account or Create a new Account
Creating and Connecting our own Database to Firebase

Step 7
After your Project is created, click on Continue
Creating and Connecting our own Database to Firebase

Step 8
2dec047eed05e1b18cd8e39b692071b948beee3d
Click on the Android as Kodular only supports Android for now.

Step 9
Add a Package Name to you Project.
image
If you want you can also keep a Nickname for your App.

Step 10
Go to Kodular, Screen 1, Advance Properties
Add the Same Package name over there
image

Step 11
Download the JSON, You can also Download from the Project Settings
Make sure when you download the File Name should be google-services.json else the app won’t work.


You can Click on Next all the other Steps

Step 12
In the 4th the click on skip in bottom.

Step 13
Click on Get Started

Step 14
Click on Next, We will modify the Rules Later.
8

Step 15
This Step may or may not come but make sure your GCP (Google Cloud Platform) Location and Cloud Storage location should be same to avoid more cost.
9

Step 16
Go to Rules.
And set the rules to


This helps in seeing the Files and Uploading the Files from our Device.

Step 17
Add the JSON File to Assets
11

You are done we have created and connected our Storage to the app wait a minute did you add the Firebase Storage Component to the designer? :rofl:

Unfortunately Firebase Storage Cannot be tested in Companion but there is a way just try it out if you get an error User does not have access… then its working!!!

To Elaborate
When you test Firebase Storage generally we use it to upload files.
When we upload files to Firebase Storage using companion It throws out an error “User does not have access to this object”.
But in APK everything works good.
I just said to Koders to help them to identify whether the Blocks which have set is correct or not.
In some cases we get another error" File not Found" which means that they have not placed the image to the file input.
So its just a way out to find whether the user has placed the blocks properly rather than installing the APK and testing it out.
This has helped me to in some cases but if the user has set to write to false in Rules then they will also get the error in the APK.

Hope this guide was useful to all the Koders :slightly_smiling_face:

If you have any queries or errors please let me know,
Also If you feel anything is missing just notify me so that I can make my guide better…

19 Likes

I love you! :grinning:Haha
Thanks! :heart_eyes:

1 Like

Good Job ! :thumbsup:

1 Like

Very nice guide!!!

1 Like

@Chirubot

:blush::blush: Very Good… Keep it up

1 Like

You can upload your image directly to the Firebase storage.

1 Like

@heliocesar84
Why are you saving images as texts in Local Storage of Device.
You can directly upload the images to Firebase Storage.
Image

How to retrieve stored data from the firebase storage?

I guess its Image not data, If its data use Firebase Database

You can’t get the Image but you can surely Download it

If you want to get Image, there is an alternative.

  • Upload File
  • Get the URL
  • Store to Firebase Database
  • Get URL whenever you want
  • Set the Image URL to

Image

1 Like

Hi everyone!
Good job and good guide!
I am an absolute begginer, so i hope your understanding
I think i followed all your indications but i’ve got some problems:
First, once downloaded to my phone i find this message at starting

Second, I uploaded an audio file (.wav) to FB Storage and got the link and put it in Database with its tag, then i’ve coded the blocks: call db get value , when db got value , set player source to value , call player start
i think allthing is done ok, but it isn’t working, because when running the app this is stopped like waiting for the audio file source, so the event when player completed is not raised

Any tip will be warmly appreciated.
Regards!

Hi @ciagarroq,
Are you using any other services of Firebase except Firebase Storage?
I understand this error is from Firebase Authentication
If you are using many services then try to catch the component using Error Occured Blocks

Hi Chirubot! Thanks for your answer

Besides FS I’m using Realtime Database for tags and values for my app

I don’t understand why Firebase Authentication could be the problem, i’m not using it in my app

I’ll try your tip about Error Occured Blocks,
in the meanwhile i drop her some screencaptures hoping they help to more clarifications:

parejas prop rules FS ubicacion apl3s

Any tip or suggestion or clarification and any claim will be warmly appreciated!
Regards!

Here is your problem:

image

Links starting with gs:// are internal only for firebase. You need to capture the correct external link, which should look something like this:

https://firebasestorage.googleapis.com/v0/b/<storageAppID>/o/<projectBucket>%2F<filename>?alt=media

2 Likes

So do I need to use the firebase component as well since there isn’t any firebase info to be added to the component?

Yes you can Organic Gary.

1 Like

So, just to be clear… I need to have firebase_database and firebase_storage on the same screen?

You can use both of them Organic Gary.

Hi and thanks lot TimAi2!
I’ve tried your solution, but i can’t see if it is right because of this error when starting

Since i am an absolute begginer, i don’t know how to solve the error

All tips will be warmly appreciated!

I guess you are using Firebase Authentication and the issue may be related to Firebase Authentication

Thanks again, Chirubot!

I don’t know enough about Firebase Authentication and so, what is the related matter with my project
I’ve already read some times about your before suggestion, this one → Firebase Authentication - Kodular Docs
but i don’t still know what is the problem and so, what to start to do about :pensive: :thinking:

So, please, any link for absolute begginers with description and examples?
It will be warmly appreciated for me!!