Uploading Files to Firebase

firebase
advanced

#1

After the update on March 6 (see here), the web viewer is finally able to upload and download files. Since Firebase is available for use on the web, it is now possible to upload images, audio and videos to Firebase storage.

I’ll be doing the Firebase back-end first and then the Thunkable interface.

To begin with, go to your Firebase console and select a project.

From there, select “Add Firebase to your web app”.
Copy the snippet of code.

Next, open up a text editor and type in the following code.

<html>
    <body>
        <input type="file" id="fileButton"/>

Below it, paste the snippet you copied from your Firebase console.
Below that, paste this piece of code:

       <script>
            var fileButton = document.getElementById("fileButton");
            fileButton.addEventListener('change', function(e){
                var file = e.target.files[0];
                var storageRef = firebase.storage().ref(file.name);
                storageRef.put(file);
            });  
        </script>

Finally, close the body and html tags.
Save your file as upload.html. Your file should now look something like this:

 <html>
        <body>
            <input type="file" id="fileButton"/>
            <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 fileButton = document.getElementById("fileButton");
              fileButton.addEventListener('change', function(e){
                  var file = e.target.files[0];
                  var storageRef = firebase.storage().ref(file.name);
                  storageRef.put(file);
              });  
           </script>
      </body>
</html>

Now, in your Firebase console, navigate to the storage option from the menu on the left.


Move to the Rules tab. Set both rules to “true” as shown in the image below.

Now return to the Files tab. From there, upload the html file you just created. Once it has finished uploading, click on it. A menu should pop up from the right.
On the menu, click on “File location”. Next, click on the download URL provided for that file. It should automatically be copied to your clipboard.
That’s all with the Firebase back-end!

In the Thunkable interface, create a new app(if you don’t have one already). Place a web viewer component. Set the home URL to the URL you copied from Firebase. That’s it! Your user will now be able to upload files directly to Firebase. These files will show up in the Files tab of the storage option in your Firebase project.

If you liked this, please let me know so that I can make another post on downloading these files from Firebase.
Cheers!

EDIT: Check out this post on downloading files from Firebase:


Downloading Files from Firebase
Add Photo save Firebase
A simple example of how to store image on Firebase
Hello my friends / Storage Firebase
Image picker blocks problem
Upload image to Firebase
Help! Firebase getting videos from their server
Select file using a file manager
Problema con firebase
No puedo descargar PDF's - WebViewer
How to store a tag and value to Firebase Database using web request?
Manage components according to data from Firebase
Problema con firebase
#2

@Helios This is amazing. Thank you very much for sharing. :relaxed:

I would really like to see another post on how to upload file and download file to and from Firebase.


#3

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


Downloading Files from Firebase
#4

My only question is when I try to upload the file the file shows up in the app next to choose file but then its waiting for an action that will “submit” the file to Firebase.

Do i have to create my own submit button??

Thank you Helios! Great idea and tutorial!!

~Ali


#5

No. As soon as you choose your file, it will automatically upload. Glad that it helped you!
Cheers


#6

Thank you for the swift answer!! :slight_smile:

Also where will the data be placed in Firebase?
under storage or database?

Thank you once again!
~Ali


#7

Storage. You’re welcome! :slight_smile:


#8

At the same time of the upload , how can i get its url ?
Thanks a lot , it really did help me .


#9

If you mean the Download URL, then look into the second part of my tutorial

Cheers
Helios


#10

Hello, I cannot upload any file . Where am I wrong? Could you help me, please?
here’s the blocks (download is working and is assigned to webviewer1) , upload is assigned to webviewer2


#11

The webpage for uploading files works quite differently than that for downloading files. You shouldn’t use a button and then parse the result on to the web viewer.[quote=“Helios, post:1, topic:1916”]
<input type=“file” id=“fileButton”/>
[/quote]

As you can see, the web viewer already has an input button. The user clicks on this button which is seen on the web viewer.

Feel free to let me know if you have anything else to ask!
Helios


#12

Thanks, but I don’t use a separate button to upload a file, so when I push the webviewer button, I can choose a file with a file manager but after that nothing happens. If I touch again the same button the choosen file name is cleared and nothing else! Maybe I forgot something​ in my blocks in the image uploaded here above? Thanks again.


#13

@Helios Yes I use only the input button in my web viewer1 which url is pointing at firebase, but after the file is choosen, nothing happens, Can you clarify where I’m wrong? thanks


#14

After a file is chosen, it is automatically uploaded to Firebase. Nothing else to do. For the sake of better UX, you may want to show a success dialog after the user picks the file.


#15

Sorry to bother you again but I really cannot upload files to firebase, so I’ve 2 questions:

  1. in this topic, post n. 2, Taifun speaks of the file upload.html packaged as an asset . But why this asset if the file is already on the firebase storage, in fact with or without it packaged ,nothing should change, doesn’t it? Anyway I tried with/without it packaged
  2. as soon as the application start, the input button appears in the web viewer, pushing it I can choose a file with the usual file managers (I’ve tried a few of them), but then as the file name is shown next to the button, nothing change.
    However I followed all instructions. I checked carefully upload.html file…
    Is there a minimum android release for this method? I use 4.4.2 version
    It would be possible to achieve the same result with web component post/put methods?

    Thank You

#16

I have the same problem, followed all the steps and still no upload. After I pick the file nothing happens.


#17

I solved the problem using android 5 API level 17 with a different phone, so I can’t say iwhich of the two was the matter.


#18

It shouldn’t be a problem with Android version at all. Here’s a tip: try the html file on your computer first. If it works there, it should work everywhere.


#19

Unless the WebViewer doesn’t support uploading files. The limits of the component are something I don’t really know of. @amrita what is the minimum SDK level to be able to upload files on the web viewer?

Please note that if the problem with the component is confirmed, there is nothing I can do from my side. All you can do is suggest users to upgrade to a newer version of Android.

Cheers


#20

Hi Helios. Does Firebase allow updating multiple rows after a certain time. Would you be able to program the Firebase to automatically update the status after twenty four hours of all rows? If yes, how can I send the information from a fusion table to a firebase database using Thunkable. Thanks.