Downloading Files from Firebase

firebase
advanced

#1

Hello all.
In this post I will demonstrate how to download the files you have saved in Firebase storage. In order to understand what is going on here, I recommend you read the first post before getting started on this:

As in the previous one, I will be dealing with the Firebase back-end first and then move on to the Thunkable blocks. If you want to know the logic behind this method, scroll to the bottom of this post.

The Firebase part

First, create a new file and save it with a .html extension. Create your html and body tags. Now, from your Firebase console, click on “Add project to the web” and paste the snippet you find there. (Detailed explanation in the first post :slight_smile:)

Once you have done that, paste this piece of code into your html file

<script>
   var fileName = window.AppInventor.getWebViewString();
   var storage = firebase.storage();
   var pathReference = storage.ref(fileName);
   pathReference.getDownloadURL().then(function(url) {
   window.AppInventor.setWebViewString(url);
            });
</script>

Close the body and html tags.
Your file should look something like this:

 <html>
        <body>
            <script src="https://www.gstatic.com/firebasejs/3.7.0/firebase.js"></script>
            <script>
            // Initialize Firebase
                 var config = {
                 apiKey: *//YOUR API KEY//*,
                 authDomain: *//YOUR AUTH DOMAIN//*,
                 databaseURL: *//YOUR DATABASE URL//*,
                 storageBucket: *//YOUR STORAGE BUCKET//*,
                 messagingSenderId: *//YOUR MESSAGING ID//*
                };
                firebase.initializeApp(config);
           </script>
           <script>
                  var fileName = window.AppInventor.getWebViewString();
                  var storage = firebase.storage();
                  var pathReference = storage.ref(fileName);
                  pathReference.getDownloadURL().then(function(url) {
                  window.AppInventor.setWebViewString(url);
                });
        </script>
     </body>
</html>

Now in your Firebase console, change the rules to true and upload this html file in the storage menu. Get the download URL for this file (for a more detailed explanation, look into my previous post).
That’s all with the back-end!

The App part

Create a new app (if you don’t have one already). You will need the following components:

  • A webviewer
  • A web component
  • A clock component
  • A textbox
  • A button
  • An image component (optional)

First, set the Home URL of the web viewer to the download URL you copied from your console. The web viewer doesn’t actually interact with the user, so you can set its height to 1px.
Next, set the Save Response of the web component to true.
Finally, set the Timer Interval of the clock component to 1ms and set Timer Enabled to false.

In the blocks editor, place the following blocks:


You can change the Response File Name to any path of your choice. The file will be saved to that directory.

That’s it! Your user will now be able to download files from Firebase storage. Once the user types in the name of the file (along with extension) and clicks the button, the file will be downloaded and saved to the directory. If the file is an image, it will also show up on the screen! You can also add a video player if the file being downloaded is a video.

For those of you curious to know how this works, continue reading… :grin:

How it works
Every file stored on Firebase has a unique download URL, which is a random string of letters and numbers. It is not possible for the user to know this URL and not practical for anyone to type it either.

What the user does know is the file name (for example, myphoto.png). Once the user types this in and clicks on the button, the file name is sent to the web viewer.

The html file converts this file name into the download URL and returns it via the web view string.
Finally, the web component performs a get request and downloads the file into the mentioned directory.

Feel free to use this in all of your projects!
Cheers
Helios


Download image from firebase,google drive
Hello my friends / Storage Firebase
Uploading Files to Firebase
#2

that’s again a great example!

However it’s insecure, as already mentioned in your Firebase Upload example


Everybody using this method must understand, that it will be very easy to extract this sensitive information from the html file stored in the assets

 var config = {
                 apiKey: *//YOUR API KEY//*,
                 authDomain: *//YOUR AUTH DOMAIN//*,
                 databaseURL: *//YOUR DATABASE URL//*,
                 storageBucket: *//YOUR STORAGE BUCKET//*,
                 messagingSenderId: *//YOUR MESSAGING ID//*
                };

To have some more security, let me recommend you to store these sensitive information inside the app using the obfuscated text block

and pass the values via the WebViewString to the HTML
How does the property Webviewer.WebViewString work?

Taifun


#3

Yes, I wanted to include that in this tutorial. But the web view string is already being used for other purposes. I could validate the web view string by using some additional JavaScript, but then it would become a hassle for our beginner users. I didn’t want to steepen the learning curve too much


#4

When you think about it, firebase on Thunkable has always been insecure. There’s nothing that I can do to help that, it’s something the devs should do.
As a side note, these values are meant to be used if you are incorporating firebase into your website, which means anybody can access it from the developer tools. I don’t think these values are all that sensitive, it is the token that really matters.

Firebase will always be insecure as long as users aren’t authenticated. There’s nothing much we can do.
Cheers
Helios


#5

instead of passing only one value in the WebViewString why not passing several values, for example as comma separated values or in JSON format, or…

Taifun


#6

Hi all,
Like others here I am unable to get this working.
I follow all the steps closely and have double checked them twice.

I get to the point where the filebutton shows,
the button allows me to select a file.
I’ve tried to open upload.html on my pc and it gives the same results.

It doesn’t seem to upload anything however.
Do I need to have other things set up first?
This is literally the first thing I’m trying in thunkable.


#7

Hi bro,I need some help,I want to make a book android app where user download books.i don’t understand how to upload this books in firebase andhow to do when user clicks in download button file is automatically start download.
Please describe briefly.


#8

Please note that this method works only on devices running Android 5.0+


#9

But how I can do this.


#10

What format are the books in?


#11

Hello
Sorry for possible offtop, i am still newbie here.
Could you tell me whether it is possible to use images from firebase storage if some particular event (for example Sprite collision) occurs? Will it be possible to use the links to the images or tags from the storage?


#12

Thanks, It worked.


#13

A post was split to a new topic: Firebase is not getting data


#14

Hey @Helios Amazing tutorial as usual!

Is it possible to view all the files for download as a list on the app, so that when the user click on an item in the list, it downloads that specific file.

Looking forward.

Antony